动态 import() 不能直接加载 CSS，浏览器原生不支持 import('./style.css')，必须依赖构建工具（如 Webpack/Vite）处理并注入；Webpack 需 MiniCssExtractPlugin 和魔法注释，Vite 依赖 cssCodeSplit，否则仅生成空 chunk 或内联 style，无法真正懒加载。
动态 import() 不能直接加载 CSS
浏览器原生不支持 import('./style.css')，这行代码在多数构建环境里会报错或静默失败。ES 模块规范只允许导入 JS 模块，CSS 是资源文件，必须由构建工具处理并注入 DOM。Webpack 和 Vite 都会把这类语句当作依赖解析，但不会自动插入 或执行样式注入逻辑 —— 真正起作用的是构建后生成的 runtime 行为，不是 import 本身。
Webpack 中 import('./xxx.css') 实际做了什么
默认情况下，import('./a.css') 在 Webpack 5+ 中会被打包进 JS chunk，**不会抽离成独立 CSS 文件**，更不会自动生效。要让它真正懒加载 CSS，必须满足两个条件：
- 启用
MiniCssExtractPlugin（生产环境）或style-loader（开发环境） - 配合 Webpack 的“魔法注释”显式标记分块意图，例如：
import(/* webpackChunkName: "chunk-a" */ './a.css') - 确保该 CSS 文件没有
@import或url()引用外部资源，否则可能被提前合并进主包
否则，你看到的只是 JS chunk 里多了一段空的 __webpack_require__ 调用，样式根本不会应用到页面上。
Vite 下 import('./xxx.css') 为什么有时“能用”
Vite 开发时看似能直接 import('./foo.css') 并立即生效，是因为它在 dev server 中做了特殊处理：将 CSS 内容内联为 标签注入。但这只是开发便利，并非标准行为。生产构建是否真正懒加载，取决于：
-
build.cssCodeSplit是否为true（默认是） - 被 import 的 CSS 是否被其他模块静态引用（如有，会被提前提升）
- 该 CSS 是否含
@import或url(./img.png)等外部引用（会触发提前合并）
比如 import('./pages/detail.module.css') 构建后生成 detail.module.[hash].css 并自动插入 ；但 import('./reset.css') 若被多个入口引用，大概率进主包，失去懒加载意义。
更可靠的做法：手动控制 CSS 加载时机
如果你需要精确控制某份 CSS 的加载与卸载（比如主题切换、插件样式隔离），不要依赖 import() 的副作用。改用运行时方案：
- 用
fetch()+createStyleSheet()手动注入，可配合media属性做条件加载 - 用
link标签动态创建并挂载：const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = '/path/to/theme.css'; document.head.appendChild(link); - 避免在组件
useEffect或mounted中反复 import 同一 CSS，容易造成重复插入或样式冲突
真正容易被忽略的是：CSS 懒加载从来不是“写个 import 就完事”，它高度依赖构建配置、资源引用关系和运行时注入逻辑。没配对插件、没加魔法注释、没检查引用链，90% 的 import('./x.css') 实际上只是假懒加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
