vue-cli 5.x vue2.0 基于less 切换主题

less.min.js 可以用cdn的。地址cdn.bootcdn.net/ajax/libs/l…

index.html 引入的内容

文件结构：

color.less写相关重置的样式，值得注意的是color.less是全局引入的，重置的样式或者js中修改的less变量必须要在这个全局文件中写，否则不生效。

相关的vue文件中。如何更改color.less声明的变量

less.modifyVars({
    '@bg-color': '#FFFFFF',
    '@font-color': '#2c3e50'
});

------------------------以上就是完整的切换主题的方式，问题就解决了---------------------------------

下边是其他问题，跟上述问题无关--可以不看

基于vue2.0版本 vant www.w3cschool.cn/vantlesson/…

ant.design ant.design/docs/react/…

这两个都有自定义的主题，但是这个主题需要配置到vue.config.js中

    loaderOptions: {
      less:{
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
          // `primary` is global variables fields name
          /* globalVars: {
            primary: '#b3d8ff'
          }, */
          modifyVars: {
              // 初始化可直接覆盖变量
              'primary-color': '#b3d8ff',
              'text-color': '#111',
              'border-color': '#eee',
              'nice-blue': '#f0f'
          },
          javascriptEnabled: true
        }
      }
    }
  }

在less中 引用变量的方式

如何修改呢？ 看ant.design有一段是

      (window as any).less
        .modifyVars({
          '@primary-color': color,
        })
        .then(() => {
          message.success({
            content: messages['app.footer.primary-color-changed'],
            key: 'change-primary-color',
          });
          this.setState({ color });
        });
    };

    const lessUrl = 'https://gw.alipayobjects.com/os/lib/less/3.10.3/dist/less.min.js';

    if (this.lessLoaded) {
      changeColor();
    } else {
      (window as any).less = {
        async: true,
        javascriptEnabled: true,
      };
      loadScript(lessUrl).then(() => {
        this.lessLoaded = true;
        changeColor();
      });
    }

动态引入less.min.js文件 然后再修改，但我觉得 比较麻烦。