Webpack 5 的 style-loader 开启 HMR 必须配置 injectType: "styleTag"，因其每次更新新建并移除 <style> 标签，避免 singleton 模式下的样式残留；Vite 需注意 @import 路径解析失效问题；CSS Modules 需声明 module '*.module.css' 类型。
Webpack 5 的 style-loader 开启 HMR 必须配 injectType: "styleTag"
默认情况下，style-loader 在启用 HMR 时会尝试复用 <style> 标签并替换内容，但 Webpack 5+ 的 HMR runtime 对旧版注入方式（如 injectType: "singleton"）支持不稳定，容易导致样式残留或更新失效。实际开发中看到“改了 CSS 没反应”“旧样式还在”，八成是这里卡住了。
正确做法是在 webpack.config.js 的 module.rules 中显式指定：
use: [{
loader: 'style-loader',
options: {
injectType: 'styleTag', // 关键：强制每次新建 <style> 标签
attributes: { 'data-hmr': 'true' } // 可选：便于调试定位
}
}]
-
injectType: "styleTag"是目前最兼容 HMR 的模式，它每次更新都插入新<style>并移除旧的，避免 DOM 状态错乱 - 别用
singleton—— 它依赖手动清理逻辑，在 CSS 模块化或动态 import 场景下极易出错 - 如果用了
mini-css-extract-plugin（生产环境），确保开发环境完全不用它：HMR 和提取 CSS 天然互斥
Vite 用户直接开箱即用，但要注意 @import 的路径解析
Vite 默认启用 CSS HMR，无需额外配置，但真实项目里常因 @import 路径写法翻车：比如 @import '@/styles/vars.css'; 中的 @ 别名在 CSS 文件里不生效，导致 HMR 监听失败，改了被导入文件却没触发更新。
解决方法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 改用相对路径：
@import '../styles/vars.css';（推荐，稳定、无歧义） - 或改用
css.preprocessOptions配alias（Vite 4.3+ 支持）：
css: {
preprocessOptions: {
scss: {
additionalData: '@use "@/styles/vars" as *;',
// 注意：这是 Sass 的 @use，不是 CSS @import
}
}
}
- Vite 的 CSS HMR 是基于文件依赖图实现的，
@import路径解析失败 = 依赖链断裂 = 不监听 - 不要在 CSS 里用
@import加载 JS 或 Vue 单文件组件里的<style scoped>—— 这类导入不参与 HMR 依赖追踪
React + TypeScript 项目中，CSS Modules 的 className 类型推导失效？检查 declare module '*.module.css'
HMR 正常运行，但编辑器报 Property 'xxx' does not exist on type 'ClassNames'，说明类型声明没跟上热更新节奏。根本原因不是 HMR 本身，而是 TypeScript 的模块声明未覆盖生成的 CSS 类型。
确保项目根目录有 src/react-app-env.d.ts（或任意 .d.ts 文件），内容为：
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
- 必须用
declare module '*.module.css'，不能写成*.css—— 否则 TS 不识别模块化语义 - 如果用了
postcss-modules或自定义generateScopedName，类型声明仍有效，但类名字符串本身不会被 TS 校验（这是预期行为） - VS Code 有时缓存旧类型，改完声明后需重启 TS Server（Ctrl+Shift+P → “Restart TS server”）
浏览器 DevTools 里看到多个重复 <style> 标签？是 HMR 正常行为，但要防内存泄漏
每次保存 CSS，style-loader 插入新标签并移除旧的，DevTools Elements 面板里快速闪现多个 <style data-hmr="true"> 是正常的。但如果页面长期开着、反复修改上百次后卡顿，可能是事件监听器或计算样式未释放。
- 检查是否在 CSS 中大量使用
@keyframes或animation—— 某些浏览器不会自动 GC 已卸载动画的渲染上下文 - 避免在
:root中定义含calc()的变量并被 JS 频繁读取（getComputedStyle触发重排） - 真正危险的是：用
document.createElement('style')手动注入 CSS 且未配合 HMRmodule.hot.dispose清理 —— 这种写法会绕过所有 loader 控制，造成标签堆积
热更新不是魔法，它只是让 CSS 变得更易调，但样式层的副作用（比如伪元素、过渡状态、字体加载）依然需要你心里有数。
