动态 import() 无法直接加载 css 是因原生 es 模块仅支持 js，css 需构建工具（如 vite/webpack）处理并注入；vite 依赖 csscodesplit 和无外部引用前提，webpack 需 minicssextractplugin 与 magic comment，纯前端则应手动创建 link 标签加载。
动态 import() 加载 CSS 文件时为什么没效果
浏览器不支持直接 import('./style.css')，这行代码在大多数构建工具里会报错或静默失败。因为原生 ES 模块只认 JS，CSS 是资源，得靠构建工具或运行时注入。
- Webpack/Vite/Rollup 都把
import('./xxx.css')当作模块依赖处理，但最终生成的代码不会自动插入<link>或<style></style> - 真正起作用的是构建后生成的 JS 代码里对
__webpack_require__或__vite__css的调用，以及配套的 runtime 注入逻辑 - 如果你用的是原生
import()+fetch()+createStyleSheet()，那 CSS 规则不会自动作用于当前页面 —— 缺少解析和 scope 绑定
Vite 中 import('./xxx.css') 能用，但得配 build.cssCodeSplit
Vite 默认开启 CSS 代码分割，import('./foo.css') 在开发期能立刻生效，在生产构建后也能正确生成独立 CSS 文件并懒加载。但有两个关键前提：
-
vite.config.ts里不能关掉build.cssCodeSplit: true（默认就是 true） - 被 import 的 CSS 文件不能包含
@import或url()引用外部资源，否则可能被提前合并进主包 - 如果用了
css.preprocessorOptions（如 scss），确保该文件后缀匹配，否则 Vite 不识别为样式资源
示例：import('./pages/detail.module.css') → 构建后生成 detail.module.[hash].css，并在 import() 成功后自动插入 。
Webpack 5 需要 MiniCssExtractPlugin + magic comment
Webpack 原生不支持 CSS 懒加载，必须借助插件。光写 import('./a.css') 只会让它打进 JS chunk，不会抽离成 CSS 文件。
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 必须安装并配置
MiniCssExtractPlugin，且在rules中对css使用MiniCssExtractPlugin.loader - 在
import()前加 webpack 特有的 magic comment：import(/* webpackChunkName: "detail-css" */ './detail.css') - 否则 chunk 名随机，无法精准控制缓存或调试；更糟的是，若没配
splitChunks，CSS 可能被塞进 JS bundle 里白忙一场
错误示范：import('./detail.css') → 构建后 CSS 字符串混在 JS 里，无独立文件，无法缓存，也无样式隔离。
纯前端不走构建工具？用 link + onload 手动加载最稳
如果你在微前端、低代码平台或 legacy 环境中没法用构建工具，就别碰 import() 加 CSS —— 直接操作 DOM 最可控。
- 创建
link标签，设rel="stylesheet"、href和唯一id（用于去重） - 监听
link.onload和link.onerror，避免样式未就绪就渲染组件 - 注意：Chrome 120+ 对跨域 CSS 的
CORS要求变严，crossorigin属性不能漏
简短示例：
const loadCSS = (href: string) => {
if (document.getElementById(`css-${href}`)) return Promise.resolve();
return new Promise((resolve, reject) => {
const link = Object.assign(document.createElement('link'), {
rel: 'stylesheet',
href,
id: `css-${href}`,
onload: () => resolve(),
onerror: () => reject(new Error(`CSS load failed: ${href}`))
});
document.head.append(link);
});
};
这个方案不依赖打包器，但你要自己管缓存、去重、错误 fallback —— 很小的体积，但逻辑毛细血管多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
