React中less.modifyVars()基本不生效，因Webpack的less-loader已在构建阶段将Less编译为静态CSS，运行时无变量作用域；应改用CSS自定义属性+Less编译时注入，通过document.documentElement.style.setProperty()动态换肤。
React项目里用Less.js的modifyVars动态改变量，确实能实现运行时换肤，但直接调用less.modifyVars()大概率会失败——因为Webpack打包后原始Less文件已编译为CSS，less.js运行时根本找不到对应变量作用域。
为什么less.modifyVars()在React中基本不生效
Webpack的less-loader在构建阶段就把Less编译成静态CSS，输出到style标签或CSS文件里。此时浏览器里只剩CSS规则，没有Less AST、也没有变量绑定上下文。less.modifyVars()需要的是一个正在解析中的Less环境（比如通过less.render()手动编译），而不是已编译完的样式表。
- 调用
less.modifyVars()后无报错，但页面样式完全不变 - 检查
document.styleSheets，发现没有新增或重写任何less相关sheet - 即使引入了
less和less-browser，也仅对<style type="text/less">内联块有效（React中极少用）
真正可行的换肤路径：CSS自定义属性 + Less编译时注入
放弃运行时操作Less变量，转而让Less在构建时把变量映射为CSS自定义属性（--primary-color等），再用JS动态改document.documentElement.style.setProperty()。这是目前最稳定、兼容性最好、且与React生命周期天然契合的方式。
- 所有主题色、圆角、阴影等Less变量，统一写成
@primary-color: var(--primary-color, #1890ff); - 主Less入口（如
index.less）开头加@import "variables.less";，其中variables.less只做var()声明，不赋具体值 - Webpack构建时无需额外配置，
less-loader会正常编译，最终生成的CSS里全是color: var(--primary-color)引用 - 换肤时只需：
document.documentElement.style.setProperty('--primary-color', '#ff4d4f');
如何安全地批量更新多个主题变量
避免逐个setProperty，封装一个applyTheme(themeObj)函数，把主题对象一次性挂载到:root上。注意键名要匹配Less中使用的var()名（建议统一小写中划线格式）。
- 主题对象字段必须是字符串，例如
{ 'primary-color': '#52c418', 'border-radius-base': '4px' } - 设置前先清空旧主题变量：遍历
getComputedStyle(document.documentElement)里所有以--开头的属性，用removeProperty()逐个删（可选，防止残留） - 不要在组件
useEffect里反复调用——应放在全局主题Provider或初始化逻辑中，避免重复触发重排 - 若需持久化（如localStorage），在
applyTheme后同步存储themeObj，刷新时读取并重置
最易被忽略的一点：Less中所有用到主题变量的地方，都必须显式写成var(--xxx)形式。哪怕只有一处漏掉（比如写了@primary-color直引用），整个换肤链路就会断掉，而且很难定位——因为样式看起来“部分生效”，实际是静态值和动态值混用导致的。
