less变量注入最可靠方式是调用less.render()时传modifyvars或在构建工具中配置：webpack用lessoptions.modifyvars（需≥7.3.0，值须为字符串），vite用additionaldata拼接变量字符串（注意引号与编码）。
Less全局变量注入的两种可靠方式
Less本身不支持运行时变量注入，所谓“按需编译”实际发生在构建阶段——必须通过构建工具把变量提前塞进编译上下文。最稳定的是在调用less.render()时传入modifyVars，或在Webpack/Vite插件配置中指定additionalData（Vite）或lessOptions.modifyVars（Webpack）。硬编码@import一个变量文件再覆盖它，属于伪注入，容易被缓存误伤。
Webpack中用modifyVars动态传入主题色
如果你用less-loader，直接在webpack.config.js里配lessOptions.modifyVars是最干净的路径。注意：该对象值只能是字符串，数字/布尔值会被转成字符串，比如{ primary: '#1890ff' }可行，但{ radius: 4 }会变成4px而非4，导致border-radius: @radius;编译出错。
- 确保
less-loader版本 ≥ 7.3.0，旧版不支持modifyVars嵌套对象 - 变量名必须与Less源码中
@xxx完全一致，大小写敏感 - 如果变量用于
.mixin()参数，需确认mixin定义时用了@arguments或显式参数接收
Vite里用additionalData注入环境变量
Vite的less配置不认modifyVars，得走additionalData——本质是在每个Less文件头部自动插入一段代码。例如想让process.env.THEME生效，不能直接写@theme: process.env.THEME;（Less不认识JS环境），而要提前在构建脚本里拼好字符串：
export default defineConfig({
css: {
preprocessorOptions: {
less: {
additionalData: `@theme: '${process.env.THEME || 'blue'}';`
}
}
}
})
这里容易踩坑：单引号必须存在，否则Less解析失败；若THEME含特殊字符（如#），需手动encodeURIComponent再解码，Less不处理URL编码。
变量覆盖顺序和缓存陷阱
Less编译器按“导入顺序 + 覆盖优先级”工作，modifyVars和additionalData的优先级高于@import文件里的默认值，但低于内联@variable: value;。更麻烦的是缓存：Webpack的cache或Vite的css.cache可能把上一次的modifyVars结果锁死。开发时建议加cache: false临时验证，上线前再开。
真正难调试的点在于：变量生效了，但某个.mixin没响应——大概率是那个mixin定义在变量注入之后才被@import进来，或者用了!important硬编码值。别猜，直接console.log输出编译后的CSS字符串看最终结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
