less变量无法运行时更新，因其仅在构建阶段编译为固定值；动态换肤必须用css自定义属性（如--primary-color）桥接，less负责导出默认值，js通过document.documentelement.style.setproperty()修改，样式中统一使用var(--primary-color, #007bff)并带回退值。
Less 本身不支持运行时主题切换，所谓“不灵活”不是配置问题，而是编译模型决定的——@primary-color 在构建阶段就变成 #1890ff，浏览器里根本找不到这个变量。真要换主题，必须靠 CSS 自定义属性（--primary-color）桥接，Less 只负责安全导出默认值。
为什么直接改 @primary-color 没反应
常见错误是以为修改 variables.less 里的 @primary-color 后刷新页面就能变色。实际它只影响下一次构建：Webpack 不会自动监听 .less 文件变更并重编译样式（除非你配了 less-loader 的 watch 或 HMR），更不会把新值注入已加载的 CSS。
- 浏览器开发者工具里搜
primary-color，看到的是硬编码的十六进制值，不是@primary-color -
getComputedStyle(document.body).getPropertyValue('@primary-color')返回空字符串——这个符号在运行时不存在 - Vue 单文件组件中写
@import "variables.less"无效，因为 scoped style 是独立编译单元，需用style-resources-loader注入
如何用 variables.less 安全导出 --primary-color
关键不是声明变量，而是让它可被 JS 动态读写。不能只写 @primary-color: #1890ff;，得桥接到 CSS 变量：
@primary-color: #1890ff;
:root {
--primary-color: @primary-color;
}
// 所有使用处必须带回退值
.btn {
background-color: var(--primary-color, #1890ff);
}
- 必须加
var(--primary-color, #1890ff)回退值，否则变量未定义时样式崩溃 - 不要在
:root外写--primary-color: @primary-color;，CSS 变量作用域只在声明块内生效 - 颜色运算（如
lighten(@primary-color, 10%)）仍要用原始@变量做，再把结果赋给另一个 CSS 变量，不能对var()做运算
构建时多主题 vs 运行时切换怎么选
两种方案本质不同，别混用：
- 构建时多套 CSS：
lessc main.less -o light.css --modify-var="@theme=light"，JS 切换<link href="light.css">—— 简单、兼容性好、无运行时开销，但体积大、无法平滑过渡 - 运行时单套 CSS：所有主题变量都映射到
--xxx，JS 调用document.documentElement.style.setProperty('--primary-color', '#ff6b6b')—— 灵活、体积小，但要求所有样式都通过var()引用，且深色模式等复杂逻辑需手动维护 - 别用
less.render()在浏览器里重编译——耗性能、不可控、不支持 HMR，只适合 demo
最容易被忽略的坑：变量作用域和覆盖顺序
Less 没有模块作用域，@import 顺序就是变量生效顺序。但很多人在 themes/dark.less 里偷偷 @import "mixins/border-radius.less"，而那个 mixin 文件又定义了 @border-radius-base，结果你的覆盖被绕过了。
- 所有主题文件（
dark.less,blue.less）必须是纯变量声明，禁止任何@import含变量的文件 - 入口文件必须严格按顺序
@import "variables.less"; @import "themes/dark.less";，且不能有任何样式规则写在@import前 - 命名空间前缀防冲突：用
@brand-primary-color而非@primary-color，避免和第三方库（如 antd）变量名撞车
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
