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+（实际依赖 less@4.2.0+），而该版本起 javascriptEnabled 默认为 false。这意味着所有依赖 JS 能力的语法都被忽略：
-
@import动态路径（如@import "${variablesPath}";）直接跳过，不报错也不加载 -
@debug语句不输出，你无法验证变量文件是否被读入 -
url("@{base}/logo.png")中的@{base}不展开，生成无效 CSS -
modifyVars仍能工作（它走顶层参数），但additionalData注入的@import失效 → 全局 mixin 和跨文件变量全部丢失
如何让 Vite 4 和 Vite 5 的 Less 配置行为一致？
唯一可靠方式是统一强制开启 JS 支持，并确保路径解析逻辑不依赖别名：
- 在
vite.config.ts的css.preprocessorOptions.less下必须写明：javascriptEnabled: true -
additionalData中的@import必须用path.resolve(__dirname, 'src/styles/variables.less')，禁用@/、~/等任何别名 - 不要复用 Vite 4 的旧配置模板——Vite 5 不再“宽容”，拼错路径或漏开
javascriptEnabled就是静默失败 - 若项目同时支持 Vite 4 和 Vite 5（如插件库），可在配置中加运行时判断：
const isVite5 = parseInt(version.split('.')[0]) >= 5;，但更推荐直接按 Vite 5 规范写死javascriptEnabled: true
为什么开了 javascriptEnabled: true 还是不生效？
常见原因不是开关没开，而是路径或作用域出问题：
-
path.resolve()基准错了：确保用的是__dirname，不是process.cwd()；monorepo 中__dirname指向当前包的配置目录，不是 workspace 根目录 -
additionalData写在了错误位置：必须在css.preprocessorOptions.less下，不是less顶层或build.rollupOptions.plugins里 - 变量文件本身有语法错误：比如开头是空行或 BOM 字符，Less 解析器会跳过整个文件，不报错
- Vue 单文件组件中用了
lang="css"却期望 Less 变量生效——只有lang="less"才触发预处理器
最易被忽略的一点：Vite 5 下，modifyVars 和 additionalData 不是互补关系，而是执行优先级竞争。如果你在 additionalData 里 @import 了变量文件，又在 modifyVars 里重定义同名变量，后者会被前者覆盖——因为 additionalData 是前置注入，先执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
