HMR 不触发更新的根本原因是样式未被 JS 模块引用；需通过 import 方式引入 CSS 使其进入模块依赖链，而非用 <link> 标签引入。
为什么修改 CSS 文件后 HMR 没触发更新？
常见现象是改了 style.css 或组件内 <style>，浏览器没反应，控制台也无 HMR 日志。根本原因通常是样式未被 JS 模块“引用”——Vite 的 HMR 依赖 ES 模块图，纯 HTML 中通过 <link rel="stylesheet"> 引入的 CSS 不在模块依赖链里，HMR 完全不感知。
解决思路只有一条：让样式成为 JS 模块的依赖项。实操建议如下：
- 删除
<link href="/src/style.css" rel="stylesheet">这类静态 link 标签 - 在入口 JS（如
main.js）顶部加import './style.css' - 若用 Vue/React，确保组件内的
<style>是标准写法（Vue 单文件组件默认支持；React 中需用import './Button.css'） - 检查 vite.config.js 是否误配了
css.preprocessorOptions导致解析失败（比如 sass 缺少node-sass或sass包）
Vue 单文件组件中 <style scoped> 修改后样式错乱？
这是 scoped CSS 的 HMR 特性导致的：Vite 会卸载旧 style 标签、插入新标签，但旧标签的 data-v-xxx 属性可能残留，与新标签冲突，造成样式闪烁或覆盖失效。
关键点在于 Vue 插件对 HMR 的处理逻辑。推荐做法：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 确保使用
@vitejs/plugin-vue（而非旧版vite-plugin-vue2），且版本 ≥ 4.0 - 不要手动在
<style scoped>里写:deep()或:global()后立即保存——这类选择器变更时 HMR 容易漏掉 DOM 重绑定 - 若频繁遇到 scope id 冲突，可在 vite.config.js 中临时启用
experimental.keepAliveOverlay: true（仅限开发） - 避免在
<style scoped>中嵌套过深（如.a .b .c { ... }），HMR 重计算 CSSOM 时可能丢弃部分规则
PostCSS 或 Tailwind 的 HMR 延迟明显？
不是 HMR 本身慢，而是 CSS 处理链变长了：每次修改都要走 PostCSS 解析 → 插件处理（如 autoprefixer、tailwindcss）→ 生成新字符串 → 注入 DOM。尤其开启 tailwindcss/nesting 或大量 @apply 时更明显。
提速关键在减少非必要处理：
- Tailwind 用户：确认
content配置路径是否包含过多文件（如"./**/*.{js,ts,jsx,tsx,vue}"），应精确到实际组件目录 - PostCSS 用户：检查
vite.config.js中css.postcss是否误写了同步插件（如自定义插件未标记async） - 禁用开发时不必要的 PostCSS 功能：比如把
cssnano移出 dev 环境配置（它本就不该在开发启用） - 若用 Windi CSS 替代 Tailwind，注意其 HMR 是基于文件监听的，需确保
configFile路径正确，否则会 fallback 到全量重编译
自定义 CSS 变量（:root）修改后 HMR 不生效？
因为 CSS 自定义属性本身不触发重绘，Vite 的 HMR 只替换 style 标签内容，但浏览器不会自动重新计算继承链。例如改了 --primary-color: red，已渲染的元素仍用旧值。
这不是 bug，是 CSS 规范行为。应对方式很直接：
- 在
style.css入口文件末尾加一行空注释，如/* @hmr-refresh */，每次保存强制刷新整个 CSS 模块 - 更稳妥的做法：用 JS 主动触发布局重排，例如在 HMR accept 回调里执行
document.documentElement.style.setProperty('--primary-color', 'red') - 如果变量集中管理，建议改用
export const theme = { primary: 'red' }+ CSS-in-JS 方式，绕过原生 CSS 变量的 HMR 局限
HMR 的边界其实很清晰：它只保证模块代码和样式文本的热替换，不负责 DOM 状态、CSS 继承链或布局重计算。复杂交互场景下，与其强求 HMR 覆盖所有变化，不如明确哪些该由 JS 控制，哪些交给样式系统——这点最容易被忽略。
