根本原因是style-loader未收到模块变更通知或模块未被标记为可热接受；Webpack对CSS模块默认不自动accept，必须由loader链透传，且需确保import引入、配置含style-loader、devServer.hot启用。
Webpack + Sass 项目中 HMR 不触发样式更新
根本原因不是 Sass 编译失败，而是 style-loader 没有收到模块变更通知，或模块未被正确标记为“可热接受”。Webpack 的 HMR 对 CSS 类型模块默认不自动 accept，必须靠 loader 链路透传。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 确保入口 JS 中显式 import 了 Sass 文件，例如
import './index.scss'；仅通过<link>或 HTML 引入不会进入 HMR 流程 - 检查
module.rules中的 Sass 处理链：必须包含style-loader（不能只用mini-css-extract-plugin，后者在开发环境会禁用 HMR） - 确认
devServer.hot和devServer.watchFiles均启用，且watchFiles包含**/*.scss - 若使用
css-modules，需额外配置style-loader的localsConvention，否则 class 名变更可能被忽略
Vite + SCSS 在 Vue SFC 中 scoped 样式 HMR 失效
失效常发生在修改 @import 的外部变量文件后，父组件样式没更新——这是因为 <style scoped lang="scss"> 内部的 @import 被 Vue 编译器处理，但 Vite 的依赖追踪可能未将被 import 的文件纳入 HMR watch 列表。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
vite.config.ts中显式声明server.watch，加入 SCSS 变量路径：{ include: ['**/*.scss', '**/*.sass'] } - 避免在
@import文件中写实际样式规则；只放$color-primary、@mixin等纯逻辑，样式仍写在 SFC 内 - 升级
@vitejs/plugin-vue和vue至 v3.4+，旧版对lang="scss"的 HMR 支持不完整 - 临时验证：修改 .scss 变量后，在控制台执行
import.meta.hot.send('vite:invalidate')触发强制刷新
Parcel 2/3 的 Sass HMR 卡在“样式未替换”
现象是控制台显示 HMR updated ./styles.scss，但页面 <style> 标签内容没变，旧样式依然生效。本质是 Parcel 的 CSS 注入机制与 Sass sourcemap 或 PostCSS 插件冲突，导致新样式块未被正确 append 或旧块未被 remove。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 删除
.parcel-cache并重启服务——这是最常被忽略的一步，缓存损坏会导致 HMR runtime 错误复用旧 hash - 禁用
postcss.config.js中所有生产向插件：cssnano、autoprefixer（除非明确配置env === 'development'） - 改用
import './styles.scss'替代<link rel="stylesheet">；Parcel 只对 JS 导入链中的 CSS 启用完整 HMR - 检查浏览器 Network 面板，确认每次变更后是否发出新的
/assets/*.css?t=xxx请求；没有则说明文件监听失败，尝试加--no-cache
Tailwind v4 + Nuxt 3 的 JIT 编译阻断 HMR
不是 Tailwind 自身问题，而是其 v4 的 content 扫描路径与 Nuxt 的模块解析边界错位：当修改一个 Vue 组件时，Tailwind 未能重新生成对应 utility class，导致 HMR 认为“CSS 无变化”，跳过注入步骤。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
tailwind.config.ts中把content数组扩大到覆盖app/、layouts/、middleware/等所有可能含 class 的目录 - 设置
experimental.optimizeUniversalDefaults: false，该选项在 dev 模式下会提前冻结部分 class，干扰增量编译 - Nuxt 配置中启用
vite.css.devSourcemap: true，否则 Tailwind 的 JIT 输出无法映射回源文件，HMR runtime 无法定位变更点 - 如仍失效，临时降级到 Tailwind v3.4.x 验证是否为 v4 特定兼容问题——目前（2026年7月）v4 的 Nuxt 集成文档仍不完善
