Less变量无法运行时换肤，因其在编译阶段即被替换为固定值；页面颜色不变的根本原因是变量作用域错误、@import顺序不当或modifyVars配置缺失@符号。
Less变量本身不能运行时换肤，所谓“一键换肤”实际是构建时变量注入 + CSS自定义属性联动的结果；直接改@primary-color却没生效，大概率是变量作用域或@import顺序错了。
为什么改了@primary-color但页面颜色不变
根本原因：Less变量在编译阶段就被替换成固定值，浏览器里看不到任何@primary-color——它早已消失。你看到的只是background: #1890ff这类硬编码结果。
- 变量写在
.btn选择器内部，比如.btn { @primary-color: red; color: @primary-color; }→ 该变量只在.btn块内有效，无法被外部覆盖 -
variables.less没放在所有@import语句最前面，比如@import 'components/Button.less'; @import 'variables.less';→Button.less编译时@primary-color还没定义，用的是默认undefined或上层默认值 - 组件样式里写了
color: #1890ff，完全绕过变量 → 换变量等于换空气 - Webpack配置中
modifyVars键名漏了@，写成'primary-color'而非'@primary-color'→ 配置被忽略
@import顺序与变量作用域怎么配才生效
变量必须声明在全局顶层、且被第一个加载，才能被后续所有文件安全引用。
- 新建统一变量文件
src/styles/variables.less，只放语义化顶层变量：@primary-color: #1890ff;、@text-color: #333;、@border-radius-base: 4px; - 主入口
index.less顶部严格按顺序写：@import 'variables.less';→@import 'base/reset.less';→@import 'components/Button.less'; - 禁止在
Button.less里再@import 'variables.less'——重复导入不报错但可能触发覆盖失效 - 深色模式不要靠
@mode: dark条件判断，而是拆成light-vars.less和dark-vars.less两套文件，构建时选其一@import
Webpack中less-loader的modifyVars怎么配才不踩坑
这个配置只影响下一次构建，不是浏览器API，也不改变已生成的CSS文件。
立即学习“前端免费学习笔记（深入）”；
- 键名必须带
@符号：modifyVars: { '@primary-color': '#52c418', '@text-color': '#111' } - 值必须是字符串，支持Less函数但不能是JS表达式：
'fade(@primary-color, 70%)'✅，hexToRgba(primaryColor, 0.7)❌ - 大小写敏感：
@TextColor≠@text-color，命名风格需全程统一 - 开发时热更新失效？检查
less-loader是否启用cache且modifyVars变更后触发重编译——可加console.log('rebuild triggered')验证 - 路径错误常表现为「变量未定义」警告，但样式仍用默认值；用浏览器开发者工具搜最终CSS里的
#1890ff，确认是不是你改的那个值
如何让@variable真正驱动运行时换肤
靠@variable自己做不到。必须把它作为桥梁，把值注入:root中的--css-var，再由JS动态改--css-var。
- 在
variables.less里写：:root { --primary-color: @primary-color; --text-color: @text-color; } - 所有组件样式用
color: var(--text-color);，而不是color: @text-color; - 换肤时只执行：
document.documentElement.style.setProperty('--primary-color', '#ff6b35'); - IE兼容？引入
css-vars-ponyfill并在setTheme()后调用cssVars({...}) - 别在
variables.less里写@primary-dark: darken(@primary-color, 10%)——编译即固化，换色后不会联动更新
最容易被忽略的一点：变量文件里混用@import嵌套超过两层，Less解析顺序可能让后导入的同名变量被提前覆盖，最终生效的不是你预期的那个值。建议变量文件保持扁平，最多一层@import引入基础色板。
