less 文件修改未生效的主因是 variables.less 未被正确纳入编译依赖：@/ 别名在 less 中无效，需用 path.resolve() 绝对路径；javascriptenabled: true 必须显式开启；且需配置 watchfiles 手动监听，否则 hmr 不触发。
Less 文件改了但样式没变，不是缓存问题，也不是代码写错——大概率是 Vite 或 Webpack 根本没把 variables.less 加进编译流水线，HMR 自然不触发。
为什么 additionalData 里的 @import 静默失效
你写了 additionalData: `@import "@/styles/variables.less";`，看起来很合理，但 Less 引擎在编译时根本不认识 @/ 别名。它只认绝对路径或相对路径，别名在 Vite 的模块解析阶段就结束了，到 Less 运行时早已失效。
- 静默失败：不报错、不警告、控制台没
@debug输出，页面样式纹丝不动 - 验证方法：在
variables.less第一行加@debug "loaded";，终端没输出 = 没加载 - 正确写法必须用
path.resolve(__dirname, 'src/styles/variables.less')，不能拼字符串（Windows 反斜杠会崩） -
javascriptEnabled: true必须显式开启，否则@import被 Less 6+ 默认禁用
Vite 配置里漏了 watchFiles，改了也白改
Vite 默认只监听你直接 @import 或 import 的 .less 文件，不会自动把 additionalData 里 @import 的文件加入 watcher。所以你改了 variables.less，Vite 根本不感知，更别说触发 HMR。
- 在
vite.config.ts的 Less 插件配置中加watchFiles: ['src/styles/**/*.less'] - 路径必须和
path.resolve()生成的路径匹配，尤其 monorepo 中__dirname指向当前包目录 - 改完配置必须重启 dev server ——
watchFiles是启动时注册的，热更新不重载它 - 运行
vite --debug css改一次variables.less，看日志是否出现change event，没有就坐实未监听
additionalData 和 modifyVars 别混用
二者机制完全不同：additionalData 是前置注入，相当于每个 .less 文件开头都自动塞入 @import；modifyVars 是传给 less.render() 的顶层参数，对 @import 进来的子文件无效。混用会导致变量覆盖混乱，且 modifyVars 容易被前者定义的同名变量静默覆盖。
- 纯业务变量管理（比如主题色、间距），只用
additionalData就够了 - Ant Design 等 UI 库主题定制才需要
modifyVars - 调试优先级：先删掉
modifyVars，只留additionalData，再加@debug @primary-color看输出值 - Webpack 项目升级 less-loader v6+ 后，
modifyVars必须收进lessOptions对象里，否则直接报错
最容易被忽略的是：你以为改的是变量，其实改的是编译入口依赖关系。热更新不生效，90% 的情况不是 HMR 坏了，而是那个 .less 文件压根没被识别为依赖项——它不在编译图里，自然不会被监听、不会重编译、也不会推送到浏览器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
