Vite 的 HMR 不触发样式更新，主因是 <style scoped> 默认不参与热更新、文件监听失效（需 usePolling: true）、.vite 缓存残留、<style> 缺 lang 属性导致预处理器未生效，以及 @apply/动态 class 未被工具链正确识别。
为什么修改
根本不是 CSS 写错了，而是 Vite 的 HMR 机制压根没把你的 <style> 变更识别为可热更新的模块。Vue SFC 中的 <style scoped> 默认不参与 HMR 流程，尤其当里面混用 @apply 或动态 class 时，Vite 会跳过整个块——改了等于白改。
- Vue 单文件组件中，
<style scoped>的变更默认不触发 HMR，除非显式启用 CSS 注入逻辑 -
@apply类名（如@apply text-blue-500）在 Windi CSS 中必须开启extract模式才能被扫描，否则静默忽略 - 动态 class 字符串（如
:class="`bg-${theme}-500`"）在首次渲染前未生成对应工具类，HMR 无目标可更新
server.watch.usePolling 必须设为 true 的场景
你在 WSL、Docker、NAS 或某些 IDE（如 VS Code Remote SSH）里开发？那大概率是文件系统事件监听失效。Vite 默认依赖 inotify/fsevents，但这些在虚拟/网络文件系统中不可靠，usePolling: false 就等于关掉了监听能力。
- 现象：改了
index.vue，控制台完全没日志，[vite] hot updated:一行都不出现 - 解决：在
vite.config.ts的server.watch中强制启用轮询：usePolling: true - 副作用：CPU 占用略升，但比“改完要手动刷新”强得多；搭配
interval: 300可平衡灵敏度与负载
node_modules/.vite 缓存目录导致样式旧版本残留
这不是“缓存没清”，而是 Vite 把已编译的 CSS 模块固化在 node_modules/.vite 里，一旦插件配置或预处理器版本变动（比如从 sass@1.77.0 升级到 1.78.0），旧缓存可能让 HMR 加载错版 CSS。
- 典型表现：改了
_variables.scss，但浏览器 Network 面板看到的 CSS 响应体里变量值还是旧的 - 必须执行：
rm -rf node_modules/.vite，再重启 dev server（仅删dist或浏览器缓存无效） - 如果你用 pnpm，还要注意
pnpm store prune清理全局 store，避免软链接污染
Vue 组件内 style 标签没加 lang 属性
<style> 没写 lang，Vite 就按纯 CSS 处理，而 Sass/Less/PostCSS 插件只处理带 lang="scss" 等声明的块。结果就是：你写了 @import '@/styles/vars.scss'，但它根本没被编译，HMR 自然无从谈起。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<style>@import './vars.scss';</style>→@import被当作文本丢弃 - 正确写法：
<style lang="scss">@import '@/styles/vars.scss';</style> - 额外坑点：Sass 版本不匹配（如
sass@1.77.0 + vite@5.4.0）会导致@import解析失败且无报错，只能降级到sass@1.76.5或升到1.78.0+
