根本原因是Less的@import在additionalData中不走Vite路径别名解析，只认绝对路径，导致variables.less未加载、HMR不触发；需用path.resolve(__dirname, 'src/styles/variables.less')并配置watchFiles。
为什么修改 variables.less 后样式没变？
根本原因是 Less 的 @import 在 additionalData 中执行时，不走 Vite 的路径别名解析逻辑，只认绝对路径。你写 @import "@/styles/variables.less"; 看似合理，实际被 Less 引擎静默忽略——文件根本没加载，自然改了也不触发 HMR。
验证方法很简单：在 variables.less 第一行加 @debug "loaded";，启动开发服务器后看控制台有没有输出。没输出，就说明它压根没被读进去。
- 必须用
path.resolve(__dirname, 'src/styles/variables.less')生成绝对路径，不能拼字符串（Windows 反斜杠会崩） - Vite 配置里得
import path from 'path'，否则path.resolve报错 -
javascriptEnabled: true必须显式开启，否则@import被禁用 - 禁用所有别名（如
@/、~/），哪怕你在其他地方用了，这里也得切掉
Less 文件修改后 HMR 完全不触发怎么办？
现象是：改完 variables.less，控制台没有 [vite] hot updated: 日志，浏览器样式纹丝不动。这不是 CSS 缓存问题，而是 Vite 根本没监听到那个文件变化。
原因在于：additionalData 注入的 @import 是 Less 运行时行为，Vite 不会自动把被 @import 的文件加入 watcher 列表。它只监听你直接 import 的 .less 文件。
- 在
vite.config.ts的 Less 插件配置里，加watchFiles: ['src/styles/**/*.less']（路径按你项目调整） - 确保
variables.less路径在watchFiles匹配范围内，否则改了也白改 - 如果用了 monorepo，
__dirname指向当前包的 vite 配置目录，不是 workspace 根目录，路径要对得上 - 重启 dev server 才能生效——watchFiles 是启动时注册的，热更新不会动态重载它
additionalData 和 modifyVars 能一起用吗？
能，但别这么干。它们作用机制完全不同，混用极易出错。
additionalData 是把代码“塞到每个 .less 文件开头”，相当于全局 prepend；modifyVars 是传给 less.render() 的顶层参数，只影响当前编译上下文，对 @import 进来的子文件无效。
- 如果你同时写了
additionalData: '@import "vars.less";'和modifyVars: { '@primary-color': '#1890ff' }，后者会被前者定义的变量覆盖，形同虚设 - Ant Design 这类 UI 库主题才需要
modifyVars；纯业务变量管理，只用additionalData就够了 - 想调试变量优先级？删掉
modifyVars，只留additionalData，再加@debug @primary-color;看输出值
生产构建时 Less 变量丢了，怎么排查？
开发时好好的，vite build 出来却报 variable @primary-color is undefined，大概率是路径在构建阶段失效了。
构建时 Node.js 的工作目录、模块解析路径和开发时不同，path.resolve 如果依赖 process.cwd() 或相对路径，很容易指向错误位置。
- 永远用
__dirname为基准：path.resolve(__dirname, '../src/styles/variables.less') - 不要在
additionalData字符串里写变量或模板表达式，确保构建时也能静态求值 - 构建失败时，先检查
vite build --debug日志里有没有ENOENT或Cannot find module提示 - 最保险的做法：把
variables.less复制一份到public/下，用绝对 URL@import "/variables.less";（需配合server.proxy或静态服务）
路径解析错一次，HMR 就哑火一次；watchFiles 漏一个 glob，改了变量就得手动刷新。这些点不显眼，但卡住的就是真实开发节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
