ant-design-vue运行时动态切换主题色（2）

4.【重点】安装antd-theme-webpack-plugin

1.首先安装提取less文件的插件antd-theme-webpack-plugin

yarn add antd-theme-webpack-plugin

复制

2、修改vue.config.js，配置并使用插件

注：可以参考一下两个网址

1.https://github.com/mzohaibqc/antd-theme-webpack-plugin

2.https://medium.com/@mzohaib.qc/ant-design-dynamic-runtime-theme-1f9a1a030ba0

3.新建文件variables.less、index.less，options 中的路径一定要和实际项目一致

index.less可以为空

variables.less文件中添加主题变量

@import "~ant-design-vue/lib/style/themes/default.less";
@primary-color: #992777;

复制

4.然后yarn serve 运行项目就可以在你设置的目录下看到提取的less文件了

color.less文件已经拿到，接下来就好办了

5.定制主题

1.修改index.html（注意红框内）

2.使用window.less.modifyVars()方法修改主题

3.效果

4.最终效果