import('./Page.css')报MIME错误是因为ES模块规范仅支持加载JS，CSS需构建工具处理；Webpack 5中路由级CSS拆分须三步：组件内import CSS、路由配置用动态import()、MiniCssExtractPlugin替代style-loader。
为什么 import('./Page.css') 会报 MIME type 错误
浏览器原生不支持 import() 直接加载 CSS 文件，import('./Page.css') 在大多数构建环境里不会被识别为合法模块，而是触发 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css"。这不是你写错了路径，而是 ES 模块规范本身只允许 import() 加载 JS；CSS 必须由构建工具处理并注入，不能靠 runtime 自己 fetch + insert。
Webpack 5 中 CSS 按路由拆分的唯一可靠路径
CSS 不是“单独加载”的，它必须和对应路由的 JS chunk 绑定在一起，靠构建时静态依赖关系实现一一映射。关键动作只有三步：
- 在路由组件内部（如
DetailPage.vue或About.tsx）里写import './DetailPage.css'（或.module.css），**绝不能**写在main.js、App.tsx或全局 layout 里 - 路由配置必须用动态
import()：Vue Router 写成component: () => import('./DetailPage.vue')，React Router 用lazy(() => import('./AboutPage')) - Webpack 配置中启用
MiniCssExtractPlugin，且css规则里 loader 必须用MiniCssExtractPlugin.loader替代style-loader
这三步缺一不可。少一步，CSS 就会打进主包、或塞进 JS chunk 里内联、或根本没生成独立 CSS 文件。
chunkFilename 和 magic comment 怎么配才不翻车
MiniCssExtractPlugin 默认输出的 CSS 文件名是 [name].css，但如果你没给 import() 加注释，Webpack 会生成随机 hash 名（如 2.a3f1b.css），调试和缓存都难定位。正确做法是：
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
立即学习“前端免费学习笔记（深入）”；
- 在路由组件 import 处加 Webpack 特有注释：
import(/* webpackChunkName: "detail-page" */ './DetailPage.vue') - 确保
output.chunkFilename设为js/[name].[contenthash].js，同时MiniCssExtractPlugin.filename设为css/[name].[contenthash].css - 检查
optimization.splitChunks.chunks是'async'（默认值），不要设成'all'否则可能把路由 CSS 提前合并进 vendors
这样构建后你会看到 dist/js/detail-page.xxxx.js 和 dist/css/detail-page.xxxx.css 成对出现，浏览器加载 JS 时自动插入对应 <link> 标签。
常见失效场景与验证方法
即使代码看起来都对，也可能因隐性配置冲突导致 CSS 没拆开。上线前建议手动验证：
- 打开构建产物
dist/目录，搜索detail-page（你设的webpackChunkName），确认是否同时存在同名的.js和.css文件 - 在 DevTools 的 Network 面板里，切换到某个路由，观察是否只加载了该路由对应的 JS + CSS，没有额外加载其他页面的 CSS
- 如果用了
@import或url(./img.png)，确保这些资源路径在构建后仍可解析——Vite 对此更敏感，Webpack 则可能把含@import的 CSS 提前合并进主包
最易被忽略的一点：所有 CSS 文件必须通过组件内 import 建立静态依赖；任何靠 JS 动态创建 <link>、或用 fetch() 加载再 insertRule() 的方式，都无法触发 Webpack 的 chunk 分割逻辑，也不会享受缓存复用。
