Ant Design:它们如何在运行时如此快速地改变颜色？

Question

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

我需要帮助来实现这一功能。提前谢谢。

​

Answer 1

我之前的回答被删除了，所以在这里添加了一些信息。

如果您使用的是Ant Design，那么我已经创建了一个名为antd-theme-generator的npm包(如果您使用的是webpack，则为antd-theme-webpack-plugin )。

它允许您指定要在浏览器中动态更新的变量，并更新特定颜色的主题。

更多信息请点击此处https://github.com/mzohaibqc/antd-theme-generator

这是https://mzohaibqc.github.io/antd-theme-generator/演示

​

const { generateTheme } = require('antd-theme-generator');

const options = {
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './src'), // all files with .less extension will be processed
  varFile: path.join(__dirname, './src/styles/variables.less'), // default path is Ant Design default.less file
  themeVariables: ['@primary-color'],
  outputFilePath: path.join(__dirname, './public/color.less') // if provided, file will be created with generated less/styles
  customColorRegexArray: [/^fade\(.*\)$/], // An array of regex codes to match your custom color variable values so that code can identify that it's a valid color. Make sure your regex does not adds false positives.
}

generateTheme(options).then(less => {
  console.log('Theme generated successfully');
})
.catch(error => {
  console.log('Error', error);
})

​