module.exports = {
chainWebpack: config => {
// 需要安装 style-resources-loader 与stylus一致
const oneOfsMap = config.module.rule("less").oneOfs.store;
oneOfsMap.forEach(item => {
.use("style-resources-loader")
.loader("style-resources-loader")
.options({
// 需要插入的文件路径
patterns: "./src/assets/variable.less"
// 需要插入的文件路径数组
// patterns: ["./path/to/vars.less", "./path/to/mixins.less"]
.end();
less 全局变量引入方法三
使用pluginOptions
需要执行 vue add style-resources-loader命令
命令执行会自动安装 vue-cli-plugin-style-resources-loader会自动提示使用什么预编译语言、会根据你选择的自动配置，只需要填写 引用文件的路径
友情提示：如果使用此方法安装了以上插件，而又放弃这种方案，编译时可能会报错，可以npm uninstall vue-cli-plugin-style-resources-loader 卸载此插件。
module.exports = {
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: "./src/assets/variable.less"
// patterns: ["./src/assets/variable.less"]
官网css引入配置参考文章sass/scss篇sass/scss文件与vue组件样式代码/* variable.scss */$color: orange;// vue组件内的style标签，将要使用上述变量的地方<style lang="scss">.scss div { color: $color;}</style>sass 全局变量引入方法一使用css.loaderOptions此处友情提示 sass-loader v7 之前使
import header from "./components/header"
import aside from "./components/aside"
import footer from "./components/footer"
export default {
name: 'layout',
components: {
header: header,
aside: aside,
footer
以为在main.js全局引入了就一劳永逸，写着常规css样式时还好好的，用到scss变量时就报错了。· 解决方法一
在需要用到的 .vue 文件里单独引用 variable.scss 变量文件，but达不到我们想要的“一劳永逸“效果
可能还会有奇奇怪怪的潜在问题，建议使用方法二。
· 解决方法二
配置vue.config.js文件，使得全局都能使用sc...
npm install node-sass sass-loader --save-dev
2.找到build中webpack.base.conf.js,在rules中添加scss规则
test: /\.scss$/,
loaders: ['style', 'css', 'sass'v]
3.vue中使用
<style lang='scss' scoped>
</style&
按网上教程配置了，但是还是一直报错，报错信息如下：
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
width: $sideBarWidth !important;
Undefined variable: "$sideBarWidth".
百度了一波，原来是sass-loader的版本的问题
// sass 版本 9 中使用 additionalData 版本 8 中使用
在Vue项目中，我们可以使用SCSS来管理样式。要引入公用变量，首先需要在项目中创建一个公用变量的文件，比如_variables.scss。
在_variables.scss文件中，我们可以定义整个项目的公用变量，比如颜色、字体大小、边距等。例如：
```scss
$primary-color: #409eff;
$font-size: 14px;
$margin: 10px;
在需要使用这些公用变量的组件中，我们可以通过import语句引入_variables.scss文件，并使用这些变量。例如，在某个组件的样式中：
```scss
<style lang="scss" scoped>
@import "@/styles/_variables.scss";
.container {
background-color: $primary-color;
font-size: $font-size;
margin: $margin;
</style>
这样，就可以在.container类中使用公用变量了。当项目中多个组件都需要使用这些公用变量时，只需要在对应的样式文件中引入_variables.scss即可。
需要注意的是，为了正确使用SCSS，我们需要安装sass-loader和node-sass依赖。在项目中通过以下命令安装这些依赖：
npm install sass-loader node-sass --save-dev
这样就可以在Vue项目中引入公用变量并使用它们了。同时，通过SCSS的功能，我们还可以使用混合（mixins）和继承（extends）等特性，更好地组织和管理项目的样式。
