Less HMR 触发样式闪烁的根本原因是编译链路长与模块依赖不可控，导致旧样式未及时卸载、新样式插入错乱；常见现象为改变量后页面先闪白再跳新样式。
Less HMR 为什么会触发样式闪烁
根本原因不是样式“没加载完”，而是 Less 编译链路长 + 模块依赖不可控，导致 HMR 刷新时旧样式未及时卸载、新样式插入时机错乱，浏览器短暂回退到无样式状态。常见现象是：改一个变量，页面先闪白/回退默认样式，再跳成新样式。
Less 文件修改后 HMR 不生效或延迟高
这通常不是 Vite 配置问题，而是 Less 自身机制绕过了模块系统：
-
@import路径含变量（如@import "@{base}/mixins.less"）→ Vite 无法静态解析依赖，不追踪变更，改了mixins.less也不会触发重编译 - 用
less.modifyVars在 JS 中动态改主题 → 修改完全不进入 HMR 流程，样式“卡住”不动 -
document.createElement('style')注入编译结果 → 完全脱离 Vite 模块系统，HMR 彻底失效 - 嵌套过深或用了
@extend→ AST 重建耗时飙升，HMR 延迟从 200ms 拉到 1.2s+，视觉上就是明显闪烁
Vite 中 Less HMR 闪烁的实操缓解方案
不能靠调 hmr.overlay 或加 debounce 解决，必须切断慢链路：
- 禁用
@extend和深层嵌套，改用扁平规则 +composes（配合 CSS Modules） - 所有公共变量/mixin 统一收进
_common.less，每个模块文件顶部第一行@import '_common.less' - 把全局主题色抽成 CSS 自定义属性，例如
color: var(--primary)，删掉@primary-color变量声明 - 启用
css.lightningcss.cssModules.auto: true（Vite v6.3.2+），改用.module.css替代部分 Less 文件
为什么改了 _common.less 其他页面样式不更新
拆分多入口后，HMR 默认只刷新当前变更文件关联的 CSS chunk。改了公共 _common.less，header.css 和 dashboard.css 不会响应——这不是 bug，是 Less 编译模型决定的隔离行为。
立即学习“前端免费学习笔记（深入）”；
真正要解决，得让构建工具感知“谁依赖谁”：Vite 用户需在 build.rollupOptions.watch 中显式配置 exclude 和 include，并确保 _common.less 被列为所有入口的 watch 依赖；否则，就只能手动刷新，或者换 UnoCSS 这类按 class 名粒度响应的方案。
