因为Less引擎不识别Vite别名，@import "@/styles/vars.less"被当作字面路径查找而静默失败；必须用path.resolve(__dirname, 'src/styles/vars.less')生成绝对路径，并以反引号包裹、加分号，如@import "${path.resolve(__dirname, 'src/styles/vars.less')}";。
为什么 additionalData 里写 @import "@/styles/vars.less" 不生效
因为 Less 引擎本身不识别 Vite 的路径别名（如 @/），它只认绝对路径或相对于当前编译文件的相对路径。你写的这行代码会被 Less 当作字面路径去查，结果就是静默失败——变量没加载、控制台无报错、HMR 也不触发。
验证是否真正加载：在 vars.less 开头加一句 @debug "vars loaded";，如果终端没输出，说明根本没进 Less 编译流程。
- 必须用
path.resolve(__dirname, 'src/styles/vars.less')拼出绝对路径 -
__dirname是vite.config.js所在目录，不是项目根目录（monorepo 要特别注意） - 字符串必须用反引号包裹，且每条
@import后必须加分号：`@import "${path.resolve(__dirname, 'src/styles/vars.less')}";` - 多个文件用
\n拼接：`@import "...";\n@import "...";`
javascriptEnabled: true 是不是必须开
不是“必须”，但如果你用了任何带 JS 表达式的 Less 写法（比如 unit(@x, px)、floor(@n)、if(@cond, a, b)），不开就会直接报错 Inline JavaScript is not enabled。
它不是为了“动态主题”而设的——Less 变量始终是编译时静态替换；它只是让 Less 解析器允许执行内联 JS 函数。
立即学习“前端免费学习笔记（深入）”；
- 只在确实需要 Less 内置函数时开启，否则关掉更安全
- 开启后无法做静态分析，CI 构建可能漏掉语法错误
- Vue 单文件组件中若含
<style lang="less">，该配置对它生效
能不能同时用 additionalData 和 modifyVars
能，但它们不是互补，而是竞争关系：前者把代码“塞到每个 .less 文件开头”，后者只影响当前 less.render() 调用的顶层上下文。
典型误用：用 additionalData 导入了 vars.less，又用 modifyVars 覆盖 @primary-color，结果发现覆盖无效——因为 additionalData 注入的变量优先级更高，modifyVars 被忽略。
- 纯变量复用场景，只用
additionalData+ 绝对路径即可 - 需要构建期整站换肤（比如 dark/light 主题打包两套 CSS），才考虑
modifyVars - 想在 Less 里复用
.mixin()？modifyVars无能为力，必须靠additionalData导入 mixin 文件
热更新失效，第一反应不该是怀疑 Vite
Less 文件改了样式没变，90% 是以下三件事之一卡住了：
- 改完
vite.config.js没重启 dev server —— Vite 不监听自己配置文件的变化 -
additionalData导入的那个vars.less本身有语法错误（少分号、括号不匹配），导致整个 Less 编译中断，后续所有 HMR 都停摆 - 用了旧版写法（如
unit(@x, px)）但没开javascriptEnabled: true，报错被吞掉，只看到样式空白
最容易被忽略的是：你写了全局变量文件，也配了 additionalData，但路径拼错了，或者没加 ;，Vite 不报错，Less 也不报错，它就默默跳过——变量就是 undefined。
