在vue组件中使用less/sass全局变量

分类:vue

大家都知道less/sass的自定义变量很方便,在 vue 单文件中我们可以使用如下方式引入

1
2
3
4
@import '../style/common.scss';
.btn{
color:$blue
}

但是有一个问题,如果我们要在其他 vue 单文件中使用这些变量怎么办呢,如果每个页面都引入一次,不仅麻烦,而且如果后期修改了路径,那岂不是要修改每个页面中的路径?

我们可以使用一个loader来解决这个问题

1
npm install sass-resources-loader --save-dev

在项目 build 文件夹里找到 utils.js ,定位到下边代码

1
2
3
4
5
6
7
8
9
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'),改成如下

1
2
3
4
5
6
scss: generateLoaders("sass").concat({
loader: "sass-resources-loader",
options: {
resources: path.resolve(__dirname, "../src/assets/css/all.scss") //这里按照你的文件路径填写
}
});

如此就可以在全局使用变量了

less 同样可以使用这个 loader,修改方式同上