前言
假设我们原有项目的主题色是蓝色的，这时有个需求，需要把主题色改成橙色的。一般情况下，我们可能会在main.js中引入公共样式文件，但你会发现，在组件中使用公共样式文件中定义的某个参数时，会报一个错误："变量未定义"。
那还有一种写法是，在每个组件中都引入公共样式(注：需要用到公共样式的组件)，但这样写，感觉代码会很不perfect 。
那有没有什么办法，只要公共样式引入一次，即可在全部组件中使用呢？
方法一：使用sass-resources-loader解决Sass全局变量问题
sass-resources-loader可以访问sass资源任何一个需要访问的sass模块。所以，可以使用共享变量和混合所有SASS样式，而不去每个文件都引用。
1.安装sass-resources-loader
npm install sass-resources-loader --save-dev
2.相关配置
在build文件夹下，找到util.js文件，然后配置相关代码。首先新增两个函数：
//简化路径
function resolveResource(name){
return path.resolve(__dirname,'../static/css/'+name)
} function generateSassResourceLoader(){
var loaders = [
cssLoader,
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
// 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../src/init.scss'
resources: [resolveResource('init.scss')]
}
}
]
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
然后在util.js文件中找到下面的代码，把“generateSassResourceLoader”方法替换到sass和scss属性中，代码如下(注释掉那一句是默认代码)：
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
// sass: generateLoaders('sass', { indentedSyntax: true }),
sass:generateSassResourceLoader(),//引用上面的配置方法
scss: generateSassResourceLoader(),//引用上面的配置方法
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
配置完后，重新启动一下项目，就可以在其它组件中使用全局变量了。
方法二：使用vue-cli 3
在vue.config.js文件中配置css.loaderOptions 选项，这边就直接贴官网上的代码了，官网地址：灰机直达
引入多个的话，在data属性中，分号后面直接添加即可。
sass: {
// @/ 是 src/ 的别名
// 所以这里假设你有 `src/variables.scss` 这个文件
data: `
@import "~@/variables.scss";
@import "~@/test.scss";
`
}
方法三：直接在App.vue中引入公共样式文件，但不能添加scoped
参考地址：