Less变量仅编译时生效，无法运行时换肤；真正实现一键切换需结合CSS自定义属性（--xxx）与Less变量作为初始值桥梁，核心是将@primary-color等顶层变量注入:root并转为var()引用，再通过JS动态修改CSS变量。
Less变量本身不能“运行时”换肤，所有@variable都在编译期固化为静态值；真正能一键切换的，是「CSS自定义属性（--xxx）+ Less变量作为初始值桥梁」的组合方案。
为什么@primary-color改了但页面没变
因为@primary-color: #1890ff;被写在某个.btn {}块内部，或混在样式规则里——Less变量必须声明在顶层（即不在任何选择器、mixin、嵌套块内），否则无法被后续@import覆盖。常见错误：
-
@primary-color定义在components/Button.less里，而主题重载文件theme-dark.less在它之后@import，但变量已被“锁死” - 多个
@import顺序错乱，比如@import 'base.less'; @import 'theme.less';，但base.less里已用@primary-color生成了样式，theme.less再改也无效 - 按钮背景直接写
background: #1890ff;，完全绕过@primary-color，换变量等于换空气
@import顺序与变量作用域怎么配才生效
核心原则：所有主题变量必须集中声明在单独文件（如variables.less），且该文件**必须第一个被@import**，并在所有业务样式之前。例如：
// variables.less @primary-color: #1890ff; @text-color: #333; @border-radius-base: 4px;
然后在主样式入口（如index.less）顶部写：
@import 'variables.less'; @import 'components/Button.less'; @import 'layout/Header.less';
这样Button.less里才能安全使用background: @primary-color;，后续通过Webpack modifyVars或替换variables.less内容就能影响全局。
Webpack modifyVars配置踩坑点
这个选项只在构建时生效，不是浏览器里实时API。它把传入对象“合并进Less编译上下文”，优先级高于源文件中的默认值。关键细节：
- 键名必须带
@符号：modifyVars: { '@primary-color': '#52c418' }，写成'primary-color'就失效 - 值必须是字符串，哪怕含函数：
'fade(#52c418, 80%)'，不能传JS表达式 - 大小写敏感：
@TextColor≠@text-color，命名风格要统一 - 它不改变已编译出的CSS，只影响下一次构建——所以开发期热更新需配合
less-loader缓存策略
如何让@variable真正驱动运行时换肤
靠@variable自己做不到，必须把它和--css-var绑定。典型做法：
:root {
--primary-color: @primary-color;
--text-color: @text-color;
}
.btn {
background: var(--primary-color);
color: var(--text-color);
}
这样，构建时@primary-color决定--primary-color初始值；运行时JS只需执行：
document.documentElement.style.setProperty('--primary-color', '#7F583F');
就能立刻刷新所有var(--primary-color)引用处。变量定义、编译期注入、运行时接管，三层缺一不可。
最容易被忽略的是：业务组件里写了color: @text-color;却没转成color: var(--text-color);，或者:root没声明对应CSS变量——这时@text-color只是个编译期常量，跟换肤毫无关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
