less变量注入后hmr失效的根本原因是@import路径不被less运行时识别，必须用path.resolve(__dirname, '...')写绝对路径，禁用别名，且需开启javascriptenabled: true。
Less变量注入后HMR失效，根本原因是@import路径不被Less运行时识别
你改了 variables.less，但页面样式没变、控制台也没 @debug 输出——说明这个文件压根没被 Less 加载。Vite 的 CSS 插件能捕获 .less 文件，但 additionalData 里写的 @import 是由 Less 引擎在编译时执行的，此时 Vite 的别名（如 @/styles/variables.less）早已退出作用域。
Less 只认绝对路径或相对路径，不解析别名。静默失败，不报错，也不触发 HMR。
- 错误写法：
additionalData: `@import "@/styles/variables.less";`（完全无效） - 正确写法：
additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.less')}";` - 必须
import path from 'path'，且用__dirname做基准，不用process.cwd() - Windows 下若用字符串拼接（如
__dirname + '/src/styles/...'），反斜杠会导致路径解析失败
修改 variables.less 后无热更新，检查 vite --debug css 日志是否触发 change event
运行 vite --debug css，然后改一次 variables.less。如果日志里没出现该文件的 change 事件，就坐实了它没被监听——不是 HMR 失效，是文件根本没进 Less 编译流水线。
验证更直接：在 variables.less 第一行加 @debug "loaded";。终端没输出，就是没加载；有输出但样式没更新，再查其他环节。
- 确保
javascriptEnabled: true已开启（Less 6+ 默认为 false，不开启则@import被忽略） - 禁用所有别名写法，包括
@/、~/、src/等，只用path.resolve()生成的绝对路径 - monorepo 项目中，
__dirname指向的是当前包的vite.config.ts所在目录，不是 workspace 根目录
additionalData 和 modifyVars 同时配置，变量优先级混乱导致覆盖失效
二者不是叠加关系，而是竞争关系：additionalData 是前置注入，相当于每个 .less 文件开头都自动写了 @import；modifyVars 是传给 less.render() 的顶层参数，对 @import 进来的子文件无效。
常见误用：以为 modifyVars 能覆盖 additionalData 里定义的变量，结果变量还是旧的——因为 additionalData 注入的变量声明优先级更高，modifyVars 被直接忽略。
- 建议只用
additionalData管理全局变量，稳定可控 - 若必须用
modifyVars（如主题切换），请确保它不与additionalData中同名变量冲突 - 生产构建时，
additionalData路径拼错会导致编译失败，而modifyVars即使配错也不会中断构建，只是变量未生效
开发环境 OK，build 后 Less 变量丢失，大概率是 path.resolve() 在构建上下文中失效
开发时路径没问题，build 时却找不到 variables.less，典型表现是打包报错 Cannot find module 'xxx/variables.less' 或生成的 CSS 里变量名原样保留（如 color: @primary-color;）。
根本原因：vite build 会切换工作目录或模块解析上下文，__dirname 可能指向临时构建目录而非配置文件所在位置。
- 始终用
path.resolve(__dirname, '...')，不要用process.cwd()或相对路径字符串 - 确认
vite.config.ts中已import path from 'path'，TypeScript 项目还需装@types/node - 构建前可加一行
console.log(path.resolve(__dirname, 'src/styles/variables.less'))，验证路径是否真实存在
fs 模块读得懂、被 Less 的 @import 解析器认得清、被 Vite 的 HMR 监听器盯得住。少一环，就静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
