vue-cli3项目增加主题颜色切换功能

1. 安装插件

cnpm install less less-loader style-resources-loader -D

2.在文件路径src/style/theme.less 里面配置默认颜色变量值；

3. 代码配置
   在vue.config.js中增加如下配置

 chainWebpack: config => {
    const oneOfsMap = config.module.rule("less").oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use("style-resources-loader")
        .loader("style-resources-loader")
        .options({
          // 这里的路径不能使用 @ 符号，否则会报错
          patterns: "./src/style/theme.less"
        })
        .end();
    });
  },

4.在页面上使用已经定义好的颜色变量值；

5.写切换主题颜色的方法；

//关键代码
 for (let key in obj) {
    document
      .getElementsByTagName("body")[0]
      .style.setProperty(`--${key}`, obj[key]);
  }

6.页面调用即可；