Less 蚂蚁设计:它们是如何在运行时如此快速地改变颜色的?

Less 蚂蚁设计:它们是如何在运行时如此快速地改变颜色的?,less,create-react-app,antd,Less,Create React App,Antd,我正在React项目中使用Ant设计。Ant提供了较少的样式,这提供了一种定制主题然后构建代码的方法(较少到css),但在其网站()的底部,他们有一个颜色选择器,可以让您在所有位置立即更改@原色。没有进行api调用,我尝试在浏览器中编译Ant Design less文件,即node_modules/antd/dist/antd.less,但编译需要几秒钟(5-10)。 我还尝试使用服务器端编译,在POST请求中发送变量,然后在DOM中插入返回的css,但这并不好 我需要帮助来实现这个功能。提前谢

我正在React项目中使用Ant设计。Ant提供了较少的样式,这提供了一种定制主题然后构建代码的方法(较少到css),但在其网站()的底部,他们有一个颜色选择器,可以让您在所有位置立即更改
@原色。没有进行api调用,我尝试在浏览器中编译Ant Design less文件,即
node_modules/antd/dist/antd.less
,但编译需要几秒钟(5-10)。 我还尝试使用服务器端编译,在POST请求中发送变量,然后在DOM中插入返回的css,但这并不好

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

我以前的答案被删除了,所以在这里添加了一些信息

如果您使用的是Ant Design,那么我已经创建了一个名为
antd主题生成器
(或者
antd主题网页包插件
,如果您使用的是网页包)

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

更多信息请点击这里

这是演示

const{generateTheme}=require('antd-theme-generator');
常量选项={
antDir:path.join(uuDirName,'./node_modules/antd'),
stylesDir:path.join(uu dirname,'./src'),//将处理扩展名为.less的所有文件
varFile:path.join(uu dirname,'./src/styles/variables.less'),//默认路径是Ant Design default.less文件
themeVariables:['@primary color'],
outputFilePath:path.join(_dirname,'./public/color.less')//如果提供,将使用生成的less/style创建文件
CustomColorRegeArray:[/^fade\(.*\)$/],//与自定义颜色变量值匹配的正则表达式代码数组,以便代码能够识别它是否为有效颜色。请确保正则表达式不会添加误报。
}
生成时间(选项)。然后(更少=>{
log('成功生成主题');
})
.catch(错误=>{
console.log('Error',Error);

})
这是一个好消息。尽管在处理这种事情的现代方法方面,这个基于客户的MAMBO SAMMBOO是一个过时的遗产(人们会考虑使用CSS自定义属性)。自定义属性是实验性的。那又怎么样?你认为一个没有保证的响应时间和现在没有主动支持的客户端脚本更不“实验性”吗?@seven phases max不认为它是针对个人的。我来这里不是为了争论哪个更好,哪个不更好。我必须用更少的钱做这件事。这是要求,不是选择。