Webpack不支持CSS按需动态加载，必须同时配置MiniCssExtractPlugin、正确loader链（如sass→css→extract）及import()魔法注释三者协同才生效；否则CSS将被塞入JS chunk而无法分离或加载。
Webpack 本身不支持 CSS 按需动态加载，必须靠 loader 链 + 插件 + 显式分块三者协同才能生效。光写 import('./style.css') 不会生成独立 CSS 文件，也不会自动插入页面 —— 它只会被塞进 JS chunk 里，变成一段无用的 __webpack_require__ 调用。
为什么 import('./xxx.css') 没效果？
浏览器原生不支持 import('./style.css')，ES 模块规范只允许导入 JS。Webpack 把它当模块依赖解析，但后续行为完全取决于配置：
- 缺
css-loader→ 报Module parse failed: Unexpected character '@'（来自@import或url()） - 没配
MiniCssExtractPlugin→ CSS 被打包进 JS bundle，无法分离，更谈不上“按需” - 没加魔法注释 → Webpack 默认把该 CSS 归入最近的父 chunk，可能进主包或被合并
- 文件含
@import './reset.css'或url(./icon.png)→ 构建时提前提升依赖，失去懒加载意义
Webpack 5 中必须配齐的三要素
要让 import('./detail.css') 真正生成独立 CSS 并在运行时加载，以下三者缺一不可：
-
MiniCssExtractPlugin必须在plugins中注册，且在module.rules中对.css/.scss使用其loader（开发环境可用style-loader替代，但不抽离） -
sass-loader+css-loader+MiniCssExtractPlugin.loader的顺序不能错：sass → css → extract；css-loader必须在sass-loader后，否则@import直接报错 - 动态 import 必须带魔法注释：
import(/* webpackChunkName: "detail-css" */ './detail.css')；否则 chunk 名随机，无法 debug、无法控制缓存、splitChunks 也难干预
常见失效场景与修复建议
即使配置看起来正确，这些细节仍会导致 CSS 不拆分、不加载、或加载后不生效：
立即学习“前端免费学习笔记（深入）”；
- 使用了
mini-css-extract-plugin但没在rules中替换style-loader→ 仍走内联路径，CSS 不抽离 -
splitChunks配置了chunks: 'all'但没设cacheGroups过滤 CSS → 所有样式被强制合并进vendors或main - SCSS 文件里写了
@import 'vars';，而vars.scss被其他入口也引用 → Webpack 提前提升为公共依赖，脱离懒加载上下文 - 构建后发现 network 面板没请求新 CSS 文件 → 检查该 chunk 是否被
import()实际触发（比如放在未执行的 if 分支里）
比 import() 更可控的运行时方案
如果你需要卸载样式、条件加载（如暗色主题）、或绕过构建限制，import() 就不够用了。这时应放弃“构建时注入”，改用运行时手动控制：
- 用
fetch()加载 CSS 字符串，再调用document.createStyleSheet()（IE）或new CSSStyleSheet()（现代浏览器） - 创建
<link rel="stylesheet">标签并挂载到document.head，可设media="print"延迟加载 - 配合
onload和onerror做加载状态反馈，比魔法注释更透明
真正决定 CSS 是否“按需”的，从来不是 Sass 或 SCSS 语法，而是你有没有切断它和主包的静态依赖链、有没有让 Webpack 认出它是独立 chunk、以及 runtime 是否真把它当资源去加载 —— 这三个环节里，任意一个断掉，import('./x.css') 就只是个假动作。
