vite中css.preprocessoroptions.less.additionaldata是全局注入less变量的唯一可靠入口，必须用path.resolve拼绝对路径、末尾加分号、开启javascriptenabled:true，且变量文件需被显式@import，否则不生效。
css.preprocessorOptions.less.additionalData必须写对路径和语法
变量文件不会自动生效，additionalData 是唯一可靠入口，但写错路径或漏掉分号就全白搭。Vite 的 CSS 层不解析 @/ 别名，哪怕你在 resolve.alias 里配了也不行。
- 用
path.resolve(__dirname, 'src/assets/styles/variables.less')拼绝对路径最稳，避免相对路径误判 -
additionalData值必须是字符串，且末尾带分号：additionalData: `@import "${path.resolve(...) }";` - 如果变量文件里混了样式规则（比如写了
.clearfix { ... }），它会在每个 Less 文件开头重复注入，导致样式爆炸 - 变量文件本身必须被至少一个 .less 文件显式
@import过，否则构建时可能被 tree-shake 掉，还不报错
modifyVars只管纯变量，不管@mixin和嵌套规则
Less 的 modifyVars 看似方便，但它只接受扁平键值对，且值只能是字符串——数字会被转成字符串，@border-radius: 4px 写成 { 'border-radius': 4 } 就会编译出 border-radius: 4;，直接失效。
- 适合场景：主题色、字号等纯值变量，例如
modifyVars: { '@primary-color': '#1890ff' } - 不支持
@mixin、@function或任何带逻辑的定义，这类东西必须走additionalData + @import - 若变量文件含
.clearfix()这类 mixin，modifyVars完全无效，得额外加less-plugin-import插件
javascriptEnabled:true不是可选项，是必需项
没开这个，@import 动态路径、lighten(@color, 10%) 这类函数全挂，连基础颜色运算都失败。
- Vite 默认不启用 JS 表达式，必须显式设为
true - 注意：这不是安全漏洞，Less 的 JS 执行仅发生在构建阶段，不进浏览器
- 旧项目升级到 Vite 5+ 后容易漏掉这一项，表现为变量能读、函数调用报错
环境变量注入要手动拼接，不能直接写 process.env
Less 编译器不认识 JS 环境，@theme: process.env.THEME 这种写法会原样输出到 CSS，变成无效声明。
- 正确做法是在配置里提前展开：
additionalData: `@theme: '${process.env.THEME || 'light'}';` - 如果环境变量含
#、;等特殊字符，需先encodeURIComponent再在 Less 里decodeURIComponent，否则解析中断 - 修改环境变量后必须重启 dev server，Vite 不监听
.env文件变化来热更新 preprocessorOptions
.btn { color: @primary-color; } 却没变色——大概率是那个组件的 .less 文件没被 Vite 当作预处理目标（比如用了 lang="css"），或者变量文件路径拼错了但没报错，只默默跳过。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
