如何修复CSS在Vite 4与Vite 5中Less变量注入不一致的问题？

Vite 5 默认禁用 Less 的 JS 支持，必须显式设置 javascriptEnabled: true；否则 @import 动态路径、@debug、变量插值等全部静默失效，且不报错。

直接结论：Vite 5 默认禁用 Less 的 JS 支持，javascriptEnabled: true 必须显式开启；Vite 4 默认开启，升级后不加这一项，@import、@debug、变量插值全静默失效——不是配置漏了，是引擎能力被关了。

为什么 Vite 5 升级后 Less 变量突然 undefined？

Vite 5 将 Less 升级到 4.2+（实际依赖 [email protected]+），而该版本起 javascriptEnabled 默认为 false。这意味着所有依赖 JS 能力的语法都被忽略：

1. @import 动态路径（如 @import "${variablesPath}";）直接跳过，不报错也不加载
2. @debug 语句不输出，你无法验证变量文件是否被读入
3. url("@{base}/logo.png") 中的 @{base} 不展开，生成无效 CSS
4. modifyVars 仍能工作（它走顶层参数），但 additionalData 注入的 @import 失效 → 全局 mixin 和跨文件变量全部丢失

如何让 Vite 4 和 Vite 5 的 Less 配置行为一致？

唯一可靠方式是统一强制开启 JS 支持，并确保路径解析逻辑不依赖别名：

1. 在 vite.config.ts 的 css.preprocessorOptions.less 下必须写明：javascriptEnabled: true
2. additionalData 中的 @import 必须用 path.resolve(__dirname, 'src/styles/variables.less')，禁用 @/、~/ 等任何别名
3. 不要复用 Vite 4 的旧配置模板——Vite 5 不再“宽容”，拼错路径或漏开 javascriptEnabled 就是静默失败
4. 若项目同时支持 Vite 4 和 Vite 5（如插件库），可在配置中加运行时判断：const isVite5 = parseInt(version.split('.')[0]) >= 5;，但更推荐直接按 Vite 5 规范写死 javascriptEnabled: true

为什么开了 javascriptEnabled: true 还是不生效？

常见原因不是开关没开，而是路径或作用域出问题：

1. path.resolve() 基准错了：确保用的是 __dirname，不是 process.cwd()；monorepo 中 __dirname 指向当前包的配置目录，不是 workspace 根目录
2. additionalData 写在了错误位置：必须在 css.preprocessorOptions.less 下，不是 less 顶层或 build.rollupOptions.plugins 里
3. 变量文件本身有语法错误：比如开头是空行或 BOM 字符，Less 解析器会跳过整个文件，不报错
4. Vue 单文件组件中用了 lang="css" 却期望 Less 变量生效——只有 lang="less" 才触发预处理器

最易被忽略的一点：Vite 5 下，modifyVars 和 additionalData 不是互补关系，而是执行优先级竞争。如果你在 additionalData 里 @import 了变量文件，又在 modifyVars 里重定义同名变量，后者会被前者覆盖——因为 additionalData 是前置注入，先执行。