摘要：
首先添加两个functions://simplify路径函数resolveResource｛returnpath.resolve｝functiongenerateAssResourceLoader（）｛varloaders=[cssLoader，'sass loader'，｛loader:'sass resources loader‘，options:ions.extract）｛retturnExtractTextPlugin.extract（｛use:loader，fallback:'vue style loader‘｝）｝否则｛return['vue样式加载器‘].contat（loader）｝｝然后在util中找到以下代码。js文件，并将“generatePassResourceLoader”方法替换为sass和scss属性。代码如下（默认代码已注释掉）：return{css:generateLoaders（），postcs:generateLoader（），less：generateLoads（'less'），//sass:generateLoaders（'sass'，{indentedSyntax:true}），//参考上述配置方法scss:generateAssResourceLoader（），//参考上述配置方式styl:generateLoaders（'stylus'），styl:generateLoaders（'sylus'）}配置完成后，重新启动项目以在其他组件中使用全局变量。
前言
假设我们原有项目的主题色是蓝色的，这时有个需求，需要把主题色改成橙色的。一般情况下，我们可能会在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
参考地址：