umi + antd 动态主题色（二）

Posted 2023-03-24

参考技术A

本文主要是基于 umi + antd 动态主题色 优化升级。

效果如下：

GitHub 源码： umi-antd-dynamic-theme master 分支

上一篇文章，动态主题色是有一些问题的，主要体现在：

接下来分别对上面几个问题进行优化解决：

针对 xxx.less 样式文件，拆分出来 xxx.theme.less 主题色样式文件，我觉得是必须的，如果不拆分的话，其实也是可以的，但是，会导致一个问题，就是除了主题色之外的所有样式文件都会被编译，会有一定的性能，其实也是不必要的。

针对 public/styles/components.less 和 config/path.config.ts 的手动配置，这个是可以通过脚本自动完成，没有必要每个人都是手动配置，这是可以优化的地方，但是，还可以继续优化，就是根本就可以不用这两个文件配置了，看如下问题2。

编译之后，会产生多个 less 文件，如下图所示：

要解决这个问题，思路就是将生成的所有 less 文件，全部统一打包为一个自定义的 less 文件，所以，编写了如下脚本，去扫描项目中所有的 xxx.theme.less 文件。

新建 scripts/theme/themeScripts.js 文件，脚本如下：

该脚本其实把问题一、问题二、问题三都解决了，对该脚本说明如下：

自定义的变量和主题色变量都在 config/theme.js 中定义，同时，通过上面的脚本，已经读取 config/theme.js 中所有定义的变量，写入了 custom.theme.less 文件的头部，所以，页面的 xxx.theme.less 文件就不需要再引入对应的主题色变量。

问题四是实际项目出现的问题，该问题是偶现的，有时候会出现主题色改变成功了，然后又失效了，网络慢的时候特别明显，也是很致命的一个问题，有些人会出现该问题，有些人不会。

查看 less.js 的源码，发现 less 会在页面加载完成时，调用 less.refresh 方法刷新，而该方法没有传 modifyVars 相关的变量，如下：

而在我们自定义的触发 less.modifyVars 方法是需要有主题色相关的变量，源码如下：

页面触发 less.modifyVars ，跟 less.pageLoadFinished 的触发是随机，没有顺序的，才导致以上偶现的问题，解决方法就是把 less.pageLoadFinished 注释掉。

-10：注意自定义文件 xxx.theme.less 使用 css 写法，而不是采用 @prefix 前缀变量写法，因为 @prefix 写法有时候会失效，正常样式写法示例如下：

通过如上配置，开发人员只需要编写 xxx.theme.less 即可，不再需要编写其他配置文件。

Vue3+Antd 修改antd主题色，配置全局css

参考技术A 先贴个官网的图片

然后说说整体流程...

然后重新 npm i
再重新运行，就解决了

奉上参考资料
Vue-cli3.0配置全局less
vue antd 按需加载 报错.bezierEasingMixin()