less变量无法运行时动态切换，只能通过编译期生成多套css文件（如theme-dark.css）并用js切换标签实现主题切换。
Less变量如何动态切换主题色？
Less本身是编译时预处理器，不支持运行时切换变量值。所谓“一键切换”，本质是预先编译多套CSS文件（如 theme-dark.css、theme-blue.css），再通过JS切换HTML的class或href属性来加载对应样式。直接在浏览器里改Less变量名或重赋值是无效的——@primary-color在编译后就已变成具体十六进制值，不存在“变量引用链”。
实际做法是：用一套Less结构 + 多组变量文件 + Webpack/Parcel等构建工具生成多个CSS输出。
- 把颜色、字体、间距等主题相关变量抽到单独文件，如
variables-dark.less和variables-light.less - 主样式文件（
main.less）只做@import "variables.less";，不写死具体值 - 构建脚本分别用不同变量文件替换
variables.less，再编译出多个CSS
如何用Webpack自动编译多主题CSS？
关键在于让Less Loader在每次编译时能“注入”不同变量。不能靠@import硬编码路径，而要用lessOptions.modifyVars传入变量对象。
示例配置（webpack.config.js）：
module.exports = {
module: {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'less-loader',
options: {
lessOptions: {
modifyVars: {
'primary-color': '#1890ff',
'border-radius-base': '4px'
},
javascriptEnabled: true
}
}
}]
}]
}
};
但注意：这个modifyVars是全局固定值。要生成多套，得写多入口或用Node脚本循环调用less.render()，传入不同变量对象并写入不同文件名。
- 推荐用
less.render()API 手动批量编译，比配Webpack多入口更可控 -
modifyVars里的键名必须和Less中@primary-color的@前名称完全一致（不含@） - 如果变量值含单位（如
2px），必须传字符串；数值类型会被转成无单位数字，导致编译报错
运行时切换主题时，为什么class切换没效果？
常见原因是CSS优先级或作用域问题。比如你给.theme-dark .btn，但原始按钮样式是.btn { background: @primary-color }——这在编译后已固化为具体颜色，不会随class变化。
真正起效的方式只有两种：
- 用CSS自定义属性（
--primary-color）替代Less变量，再配合:root.theme-dark重设这些属性（需放弃纯Less方案，改用CSS-in-JS或PostCSS） - 彻底分离样式：每个主题对应一个独立CSS文件，切换时用JS替换
<link href="theme-dark.css">的href，并确保旧文件被移除（避免规则叠加）
如果坚持用Less，又想保留变量语义，那必须接受“切换=重新加载CSS文件”，而不是操作DOM class。
为什么不能用@import + JS动态改@变量？
因为@import是Less编译阶段指令，JS运行时早已结束。浏览器里看到的只是普通CSS，所有@符号都消失了。执行document.styleSheets[0].cssRules查不到任何Less变量痕迹。
试图用JS修改<style></style>标签内容，再调用less.refreshStyles()？别试——这个API仅对内联<style type="text/less"></style>有效，且只支持开发环境，生产打包后失效，还依赖less.js全量加载（约200KB）。
-
less.refreshStyles()无法识别外部引入的@import链，会报variable is undefined - 即使成功，性能极差：每次切换都要重新解析、编译整套Less，用户明显感知卡顿
- 移动端Safari对
less.js兼容性差，容易静默失败
主题切换不是炫技场景，稳定性和加载速度比“看起来像动态”重要得多。老实用多CSS文件 + link切换，是最可靠路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
