Vite引入CSS后热更新失效，需先验证import.meta.hot是否存在，若为undefined则HMR未启用；检查入口文件是否正确引入、server.host不能设为'0.0.0.0'；清除node_modules/.vite缓存并重启服务；CSS须静态import且避免多层@import嵌套。
你在Laravel项目里用Vite引入CSS后，改了样式文件却要手动刷新才能看到变化，页面毫无反应——这不是CSS写错了，而是HMR链路在某个环节被悄悄掐断了。
确认 Laravel-Vite 插件是否真正接管了开发服务
第一步不是改代码，而是验证底层通道是否打通：打开浏览器开发者工具的 Console 面板，输入 import.meta.hot 并回车。如果返回 undefined，说明 Vite 的热更新运行时根本没加载进来，后续所有 CSS 修改都注定静默失效。
检查 resources/js/app.js（或你实际的入口文件）顶部是否有 import './bootstrap'; 这类语句；如果没有，或者它被注释掉了，【Laravel-Vite 插件不会自动注入 HMR 客户端脚本】，import.meta.hot 必然为空。
确保该入口文件被 @vite(['resources/js/app.js']) 正确引用，且路径大小写完全匹配磁盘真实路径（例如 App.js 和 app.js 在 macOS/Linux 下被视为不同文件）。
立即学习“前端免费学习笔记（深入）”；
检查 vite.config.js 中 server.host 配置
打开 vite.config.js，定位到 server 配置段：
若存在 host: '0.0.0.0'，必须立刻删掉或改成 host: true。浏览器出于安全限制，会拒绝连接 0.0.0.0 地址上的 WebSocket，导致 HMR 消息无法送达客户端。
这个配置常见于 Docker 或 WSL 环境下的“兼容性尝试”，但它直接切断了热更新的生命线。
强制清除 Vite 本地缓存并重启服务
第一步：关闭当前正在运行的 npm run dev 进程；
第二步：删除项目根目录下的 node_modules/.vite 文件夹；
第三步：执行 NODE_ENV=development npm run dev（显式声明环境变量，避免某些 shell 或 Docker 环境覆盖）；
第四步：等待终端输出 “Local: http://localhost:…” 且无报错后，再修改任意一个 CSS 文件保存。
【不要跳过删除 .vite 目录这一步】——Vite 会在此缓存中固化模块图谱和 HMR 映射关系，一旦路径或导入方式变更（比如从动态 import 改为静态），旧缓存会导致监听失效。
验证 CSS 引入方式是否合规
方法一：在 resources/js/app.js 中使用静态 import 语句引入主样式文件：
import '../css/app.css';
方法二：在 Blade 模板中通过 @vite 指令引入 CSS（仅限 Vite 5.4+ 且插件版本 ≥ 1.1）：
@vite(['resources/css/app.css', 'resources/js/app.js'])
⚠️ 禁止在 CSS 文件中嵌套多层 @import，例如 app.css 里 @import 'base.css';，而 base.css 又 @import 'utils.css';——Vite 不递归监听被 @import 引入的子文件变更。
