本文以Sass做案例，Less的参考，基本配置大同小异。
假如我们有一个Sass的全局变量common.scss文件，路径 ../style/common.scss 代码如下:
@mixin t-button($color,$background) { color:$color; background:$background; padding:5px 10px; }
现在我们想在一个vue文件里引用这个全局样式，怎么办呢？我们能按下边的方法导入。
<style> @import '../style/common.scss'; button{ @include t-button(#fff,blue); } </style>
但是这样有一个问题，如果还有其他vue页面也想用这个全局的common.scss文件，我们还需要在使用的vue页面里再次按照上面的方法引入，那么问题来了，如果我更改了这个common.scss文件的路径，那么每次我还要去修改所有的vue页面里的common.scss文件文件路径。有什么好的方法呢，让我一次引入，所有的vue页面均可以自动引用？
1.添加依赖
npm install sass-resources-loader --save-dev
在项目build文件夹里找到utils.js ，定位到下边代码
return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }
把上面这句scss: generateLoaders('sass'),改成如下
scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/css/all.scss')//这里按照你的文件路径填写 } } )
OK，完成，修改后的代码是
return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/css/all.scss')//这里按照你的文件路径填写 } } ), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }
这样就可以在所有的scss文件或者vue文件运用全局的scss，而不需要在单独引入。
