import() 动态引入 CSS 绕过 HMR 因其运行时加载特性使构建工具无法静态分析依赖，导致变更不触发更新；Vue SFC 的 仅支持静态字符串路径，动态拼接无效；需改用静态条件 import、JS 插入 link 或统一小写命名规避大小写陷阱。
为什么 import() 动态引入 CSS 会绕过 HMR 依赖图
因为 import() 是运行时动态加载，Webpack/Vite 的静态分析无法在构建阶段将其纳入模块依赖关系，导致 CSS 文件变更后 HMR 运行时不感知、不触发更新。
常见现象是：修改了动态引入的 CSS 文件，控制台看不到 hmr update 日志，浏览器样式无变化，只能整页刷新。
- 静态
import './style.css'被打包工具解析为显式依赖，能进 HMR 图 -
import('./style.css')被当作异步 chunk 处理，其模块 ID 不被主 HMR runtime 监听 - Vite 中即使启用了
server.hmr，动态 import 的 CSS 也不会触发import.meta.hot.accept回调
Vue 单文件组件中
Vue SFC 的 不支持表达式或变量拼接路径，写成 或 都无效——编译器直接忽略，最终没生成任何 CSS 模块，自然不在 HMR 范围内。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 只接受静态字符串字面量，如
- 若需多主题切换，应改用 JS 动态插入
标签，并手动管理样式卸载逻辑 - 否则构建时该
标签被静默丢弃，开发者甚至收不到警告
如何让动态样式变更也能热更新
没有通用“自动 HMR”方案，必须退回到可被静态分析的模式，或手动接管更新流程。
- 把动态 CSS 拆成多个静态入口，用条件 import：
theme === 'dark' ? import('./dark.css') : import('./light.css') - 使用
useCssModule()（Vite 插件）或injectStyle()工具函数，在 JS 中加载并监听文件变更 - 在开发环境禁用
MiniCssExtractPlugin（Webpack）或css.inline（Vite），确保样式始终走 JS 注入链 - 避免在
setup()或onMounted中执行import()加载 CSS —— 此时模块已挂载，HMR runtime 不再扫描新依赖
最容易被忽略的路径陷阱
即使你写了静态 import('./styles/theme.css')，只要路径大小写与磁盘实际不符（比如磁盘是 Theme.css，代码写成 theme.css），Vite 就会静默跳过监听 —— 不报错、不警告、不更新，连 HMR 日志都不打印。
- Windows/macOS 文件系统默认不区分大小写，但 Vite watcher 区分
- 检查终端启动时的
vite:watcher日志，确认该路径是否出现在监听列表中 - 推荐统一用小写 + 中划线命名：
button-styles.css，杜绝ButtonStyles.css类混用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
