本文以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，而不需要在单独引入。
