用additionaldata注入变量文件最稳定可控，但需用path.resolve()转绝对路径、开启javascriptenabled且禁用别名；否则@import无法解析，导致变量undefined、hmr失效。
直接结论：用 additionalData 注入变量文件是最稳定、最可控的方式，但必须确保路径解析正确、javascriptEnabled: true 已开启，且不能混用别名（如 @/）。
为什么 additionalData 注入后变量仍报 undefined？
根本原因是 Less 引擎在解析 @import 时，只认**绝对路径或相对路径**，不识别 Vite 别名（如 @/styles/variables.less）。Vite 的 CSS 插件虽捕获了 .less 文件，但 additionalData 中的 @import 是由 Less 运行时执行的，此时 Vite 的路径别名机制已退出作用域。
- 现象：
vite --debug css日志里看不到variables.less的 change event，修改该文件无 HMR 触发 - 验证方式：在
variables.less顶部加@debug "loaded";—— 若控制台无输出，说明该文件根本没被 Less 加载 - 错误写法：
additionalData: `@import "@/styles/variables.less";`（静默失败） - 正确写法：用
path.resolve()转为绝对路径，例如additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.less')}";`
如何让 additionalData 在开发与生产环境都生效？
开发环境通常没问题，但生产构建（vite build）中，如果路径拼接出错或 path 模块未被正确 resolve，会导致全局变量丢失——编译时找不到 variables.less，所有 @primary-color 引用直接报错或回退为原始变量名。
- 必须使用 Node.js 原生
path.resolve()，而非字符串拼接（避免 Windows 反斜杠问题） - 确保
vite.config.ts或.js文件中已import path from 'path' - 不要依赖
process.cwd()，始终以__dirname为基准（__dirname是配置文件所在目录） - 若项目有 monorepo 结构，注意
__dirname指向的是当前包的 vite 配置目录，不是根目录
additionalData 和 modifyVars 能否共存？
可以，但行为完全不同，且容易互相干扰。二者不是叠加关系，而是竞争关系：
-
additionalData是把一段 Less 代码“前置注入”到每个.less文件顶部，相当于每个样式文件开头都自动写了@import "..."; -
modifyVars是传给less.render()的顶层参数，仅影响当前渲染上下文，对@import进来的子文件无效（除非子文件也显式调用modifyVars） - 常见误用：同时配置
additionalData和modifyVars并期望后者覆盖前者定义的变量 → 实际上additionalData导入的变量优先级更高，modifyVars会被忽略 - 建议：纯自定义变量管理，只用
additionalData；若对接 Ant Design 等 UI 库主题，才需modifyVars，此时应禁用additionalData中重复导入
真正容易被忽略的点是：Vite 的 CSS 插件不会主动 watch additionalData 里 @import 的目标文件，所以热更新失效不是缓存问题，而是模块图缺失。加个 watchOptions 也没用——得靠插件自己补全依赖关系，目前官方未提供该能力。要么接受手动刷新，要么改用 less-loader 风格的完整依赖追踪（需自研插件）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
