vue全局安装自定义主题色方法

先安装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了

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容