Ant设计：它们如何在运行时改变颜色如此之快？

Question

我在React项目中使用Ant Design。 Ant提供了less中的样式，它提供了一种自定义主题然后构建代码（减去css）的方法，但是在他们的网站（https://ant.design/docs/react/introduce）底部有一个颜色选择器，可让你立即在所有地方更改@primary-color。没有进行api调用，我尝试在浏览器中编译Ant Design less文件，即node_modules/antd/dist/antd.less，但编译需要几秒钟（5-10）。我还尝试使用服务器端编译通过在POST请求中发送变量然后在DOM中插入返回的css来做到这一点，但这并不好。

我需要帮助才能实现此功能。提前致谢。

Answer 1

经过长时间的努力，我能够编写一个脚本来生成包含我所需的较少变量和css规则的color.less文件，以便更新颜色。您可以在Medium https://medium.com/@mzohaib.qc/ant-design-live-theme-588233ea2bbc上阅读我的文章或从github下载源代码并按照这一点进行操作。

Github：https://github.com/mzohaibqc/antd-live-theme

现场演示：https://antd-live-theme.firebaseapp.com/

Update (Sep 8, 2018):

这是代码javascript代码/脚本生成color.less来处理运行时主题https://github.com/mzohaibqc/antd-theme-generator

使用相同脚本的反应应用程序的webpack插件在这里https://github.com/mzohaibqc/antd-theme-webpack-plugin

如果有帮助的话，在Github上点击★★★★