为什么Vite热更新CSS中的Less样式不生效

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。

1. 错误写法：additionalData: `@import "@/styles/variables.less";`（完全无效）
2. 正确写法：additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.less')}";`
3. 必须 import path from 'path'，且用 __dirname 做基准，不用 process.cwd()
4. Windows 下若用字符串拼接（如 __dirname + '/src/styles/...' ），反斜杠会导致路径解析失败

修改 variables.less 后无热更新，检查 vite --debug css 日志是否触发 change event

运行 vite --debug css，然后改一次 variables.less。如果日志里没出现该文件的 change 事件，就坐实了它没被监听——不是 HMR 失效，是文件根本没进 Less 编译流水线。

验证更直接：在 variables.less 第一行加 @debug "loaded";。终端没输出，就是没加载；有输出但样式没更新，再查其他环节。

1. 确保 javascriptEnabled: true 已开启（Less 6+ 默认为 false，不开启则 @import 被忽略）
2. 禁用所有别名写法，包括 @/、~/、src/ 等，只用 path.resolve() 生成的绝对路径
3. monorepo 项目中，__dirname 指向的是当前包的 vite.config.ts 所在目录，不是 workspace 根目录

additionalData 和 modifyVars 同时配置，变量优先级混乱导致覆盖失效

二者不是叠加关系，而是竞争关系：additionalData 是前置注入，相当于每个 .less 文件开头都自动写了 @import；modifyVars 是传给 less.render() 的顶层参数，对 @import 进来的子文件无效。

常见误用：以为 modifyVars 能覆盖 additionalData 里定义的变量，结果变量还是旧的——因为 additionalData 注入的变量声明优先级更高，modifyVars 被直接忽略。

1. 建议只用 additionalData 管理全局变量，稳定可控
2. 若必须用 modifyVars（如主题切换），请确保它不与 additionalData 中同名变量冲突
3. 生产构建时，additionalData 路径拼错会导致编译失败，而 modifyVars 即使配错也不会中断构建，只是变量未生效

开发环境 OK，build 后 Less 变量丢失，大概率是 path.resolve() 在构建上下文中失效

开发时路径没问题，build 时却找不到 variables.less，典型表现是打包报错 Cannot find module 'xxx/variables.less' 或生成的 CSS 里变量名原样保留（如 color: @primary-color;）。

根本原因：vite build 会切换工作目录或模块解析上下文，__dirname 可能指向临时构建目录而非配置文件所在位置。

1. 始终用 path.resolve(__dirname, '...')，不要用 process.cwd() 或相对路径字符串
2. 确认 vite.config.ts 中已 import path from 'path'，TypeScript 项目还需装 @types/node
3. 构建前可加一行 console.log(path.resolve(__dirname, 'src/styles/variables.less'))，验证路径是否真实存在

真正卡住人的地方不在语法，而在 Less 运行时和 Vite 构建时两个上下文的路径语义完全割裂——你写的路径，得同时被 Node.js 的 fs 模块读得懂、被 Less 的 @import 解析器认得清、被 Vite 的 HMR 监听器盯得住。少一环，就静默失效。