Less变量无法运行时修改，必须通过CSS自定义属性（如--primary-color）桥接：Less编译时用var(--primary-color, #007bff)注入默认值，JS通过document.documentElement.style.setProperty()动态修改，实现真正换肤。
Less变量本身不能在运行时动态修改
直接在 JS 里改 @primary-color 这类 Less 变量是无效的——Less 是编译时预处理器，所有变量在构建阶段就已替换为具体值，打包后生成的 CSS 里根本不存在变量名。你看到的“动态换肤”效果，实际是靠其他机制实现的，不是真正在改 Less 变量。
真正可行的动态换肤方案：CSS 自定义属性 + :root
要让主题色在浏览器中实时切换，必须用原生 CSS 的 --color-primary 这类自定义属性（CSS Custom Properties），配合 JS 修改 document.documentElement.style.setProperty()。Less 在这里只起“生成初始值”的作用，比如：
:root {
--color-primary: #2563eb;
--color-text: #333;
}
然后在组件样式中使用：
.btn {
background: var(--color-primary);
color: var(--color-text);
}
- 所有主题色都定义在
:root下，便于 JS 统一控制 - Less 文件可以用来批量生成多套
:root规则（如theme-dark.less、theme-light.less），但最终注入页面的是编译后的 CSS，不是 Less 源码 - 切换主题时，只需 JS 替换
document.documentElement.className或直接 setProperty，无需重新编译 Less
vite.config.ts 中的 additionalData 只影响构建，不支持运行时注入
你在 vite.config.ts 里配置的 css.preprocessorOptions.less.additionalData，只在开发或构建时生效，用于把 @import "@/assets/styles/variables.less"; 自动塞进每个 Less 文件头部。它不会让变量变成“可被 JS 读写”的东西。
立即学习“前端免费学习笔记（深入）”；
- 错误认知：“改了
variables.less里的@primary-color，再调个 API 就能刷新样式” → 不行，改完必须重启 dev server 或重新 build - 正确做法：把 Less 当作“主题配置模板”，用它生成多套 CSS 变量规则，再由 JS 控制哪一套生效
- 如果硬要用 Less 变量做主题，只能走“多包构建”路线：构建时根据环境变量输出不同 CSS 文件（如
theme-blue.css、theme-green.css），再用 JS 动态link切换 —— 但这和“动态修改 Less 变量”无关，只是换 CSS 文件
容易忽略的关键点：CSS 变量作用域与继承链
很多人写了 document.documentElement.style.setProperty('--color-bg', '#000') 却发现某些组件没变色，问题往往出在作用域上：
-
:root定义的变量默认全局可用，但若组件用了scoped样式，且内部选择器没显式继承（比如没写color: var(--color-text);），变量就不会生效 - 深层嵌套组件若覆盖了父级颜色（如写了
color: #666 !important），会打断 CSS 变量继承 - Element Plus 等 UI 库的主题变量需单独处理（如通过
el-config-provider或其提供的 CSS 变量前缀），不能指望全局--color-primary自动透传过去
真正要落地动态换肤，得接受一个事实：Less 只负责“写得爽”，JS 和 CSS 变量才负责“变得快”。别试图绕过浏览器渲染机制去“动态编译 Less”。
