Less变量无法动态注入CSS，因其是编译时预处理器；动态主题仅可通过编译期覆盖（如modifyVars）或运行时桥接（CSS自定义属性）实现，后者更适用于响应式场景。
Less变量根本不能“动态注入CSS”
这是个常见误解。Less是编译时预处理器，所有@primary-color、@border-radius-base这类变量在构建阶段（Webpack/Vite启动时）就被替换成固定值，生成纯CSS后就和JS完全无关了。所谓“动态注入”，实际只有两种可行路径：编译期覆盖，或运行时桥接。
用modifyVars在构建时注入变量
这是最接近“动态”的方式，但本质是重新编译——不是改一个变量就刷新样式，而是触发一次完整Less解析流程。它只适合低频、整站级的主题切换。
-
modifyVars必须通过构建工具透传：less-loader的lessOptions.modifyVars，或lessc --modify-var="key=value" - 键名必须带
@符号，值必须是字符串：{ '@primary-color': '#1da57a' }，写成primary-color会失效 - 修改后需重启dev server（Webpack）或手动触发重编译（Vite），HMR不自动感知变量变更
- 别在浏览器里调
less.modifyVars()——现代构建工具默认禁用浏览器端Less编译，且性能极差、无法隔离组件实例
用CSS自定义属性桥接JS与Less
这才是响应用户操作（如props变化、主题切换）的正解。Less负责静态回退，JS负责运行时写入，两者通过--xxx连接。
- Less中写：
color: var(--text-color, @default-text);，第二个参数是降级值，确保未设置CSS变量时样式不崩 - JS中改：
el.style.setProperty('--text-color', props.color)或document.documentElement.style.setProperty('--bg-color', theme.bg) - 注意作用域：组件内改
el.style，全局主题改document.documentElement.style - 别在伪类或媒体查询里用
var()做关键计算——部分浏览器不支持，比如@media (min-width: var(--breakpoint))无效
容易被忽略的坑
变量名带连字符（@bg-color）传参时必须转下划线（bg_color），否则lessc解析失败；additionalData注入变量对Vue单文件组件生效，但HMR下不会热更新；javascriptEnabled: true虽能执行JS表达式，但带来安全风险且破坏静态分析，慎用。
立即学习“前端免费学习笔记（深入）”；
