Webpack热更新（HMR）修改CSS后样式消失，主因是MiniCssExtractPlugin使用[contenthash]导致文件路径变更、css-loader配置缺失importLoaders或modules支持、未显式module.hot.accept()接管CSS模块，或loader链路协作异常。
Webpack热更新（HMR）修改CSS后样式消失，不是CSS没加载，而是模块热替换逻辑没正确接管样式更新——常见于MiniCssExtractPlugin或css-loader配置不当，尤其在webpack 5中高频出现。
MiniCssExtractPlugin输出名含[contenthash]导致HMR失效
webpack 5下，若CSS输出配置用了[contenthash]，每次修改都会生成新文件名，但HMR仍尝试替换旧文件路径，浏览器实际加载的是空/未注入的CSS块，表现为全站样式清空+控制台报错“Failed to load resource”。
- 检查
webpack.config.js中MiniCssExtractPlugin.loader的filename或chunkFilename是否含[contenthash] - 开发环境临时改为
[name].css或main.css，避免哈希变动干扰HMR链路 - 注意：这不是bug而是设计行为——HMR不处理哈希变化的文件路径，仅替换模块内容
css-loader未启用importLoaders或modules模式干扰HMR
当CSS文件里有@import或启用了CSS Modules，但css-loader没配对支持，HMR会因模块依赖关系断裂而跳过更新，表现为改了CSS却无反应，甚至页面样式回退到初始状态。
- 确认
css-loader配置含{ importLoaders: 1, modules: false }（非Modules场景）或{ modules: { mode: 'local' } }（Modules场景） - 若用了
postcss-loader，确保它在css-loader之前，否则@import可能被提前解析失败 - 禁用
css-loader的esModule: false（webpack 5默认为true），否则HMR无法识别导出变更
没有显式module.hot.accept()接管CSS模块
纯CSS文件（非CSS Modules）默认不触发HMR更新逻辑，因为Webpack认为它无导出、无副作用，热替换时直接忽略，结果就是改完保存，样式没变或丢失。
立即学习“前端免费学习笔记（深入）”；
- 在入口JS中加一段兜底代码：
if (module.hot) module.hot.accept('./styles.css', () => {}); - 更稳妥的做法：用
style-loader替代MiniCssExtractPlugin.loader跑开发环境——它内置HMR支持，且不依赖文件哈希 - 注意：
style-loader只用于dev，生产必须切回MiniCssExtractPlugin，二者不可混用
真正卡点往往不在配置本身，而在多个loader插件间的协作边界：比如postcss-loader把-webkit-box-orient删了，cssnano又合并了float规则，最后HMR拿到的已是残缺CSS。调试时优先看浏览器Network面板里HMR推送的CSS内容是否完整，再倒查构建产物。
