Vue中SASS如何全局使用变量，mixin，或者function

在写Vue时，如果组件要引入sass或less的写法，就到到处引@import，这样一旦调整变量的目录，所有的组件引入的地址都需要修改。在这种情况下可以使用sass-resources-loader

比如在全局定义一个@function,我们打算移动端工程里用vm函数代替px，



那么我们只能在工程里每个.vue我们都

@import ./mixin.scss

，这样重复性的工作谁都不愿意做，万一这个文件路径改了，那真的无语了。



今天科普一个东西 sass-resources-loader，
这个东西就可以省去在每个.vue里都@import你需要的变量,mixin,function。（它不仅支持SASS，还支持LESS，POSTCSS等）👍。

那么在这里分享下我是如何在vue工程里配置：
1.vue-cli构建的vue工程里，都会有build文件夹，这里主要是放webpack的配置。找到

util.js

2.往里面添加

// =========
// SASS 配置
// =========
function resolveResouce(name) {
return path.resolve(__dirname, '../src/assets/scss/' + name);
}
function generateSassResourceLoader() {
var loaders = [
cssLoader,
// 'postcss-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
// it need a absolute path
resources: [resolveResouce('var.scss'), resolveResouce('mixins.scss')]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}

最终，大功告成，以下代码就可以编成这样的效果：3.往文件下面找到



将sass,scss里的内容改为我们刚刚写的函数，即