先安装less和sass文件,安装在‘devDependencies’文件夹下
npm i less less-loader -D
npm i sass-loader sass-resources-loader -D
注意less要安装@3.9.0版本,less-loader安装@5.0.0版本,否则版本太高会搞错
安装完后在## build-uitls文件 generateLoaders方法内加入如下代码
if (loader == "less") {
loaders.push({
loader: "sass-resources-loader",
options: {
resources: path.resolve(__dirname, "../src/assets/css/variable.less")
}
});
}
path.resolve()方法里面跟的文件路径就是设置全局变量的文件
在variable.less里面就可以定义变量全局用了
@color-primary: #12C7A6;
@color-warning: #D07724;
需要用到这个颜色的样式就可以直接写上:
.font{
color: @color-primary;
}
设置完后重启编辑器就OK了