import('./style.css')常不生效，因构建工具默认不将动态import()视为CSS注入指令：Webpack报错或静默忽略，Vite返回空模块，根本原因是CSS注入依赖构建时loader链，而动态import是运行时行为；真正可行的是路由级或组件级绑定CSS至JS模块生命周期，或主题切换时预编译多套CSS并用DOM控制link标签。
为什么 import('./style.css') 常常不生效
这不是你写错了，而是构建工具默认不把动态 import() 当作 CSS 注入指令。Webpack 会直接报错或静默忽略；Vite 虽能解析该语句，但返回的是空模块（{ default: undefined }），CSS 根本不会插入 <head>。根本原因在于：CSS 注入依赖构建时的 loader 链（比如 style-loader 或 Vite 的 runtime 注入逻辑），而动态 import() 是运行时行为，两者不在同一调度层。
真正起作用的 CSS 懒加载路径
CSS 无法“单独懒加载”，它必须依附于 JS 模块的生命周期。可行方案只有两种：
- 路由级绑定：在 Vue Router 或 React Router 的异步路由中，
import('./Page.vue')自动带出其@import './Page.module.css'或import './Page.module.css'，构建工具会把 CSS 提取并随 chunk 一起注入 - 组件级绑定：用
React.lazy(() => import('./Card'))或defineAsyncComponent(() => import('./Modal'))，只要组件内部有import './Modal.css'，样式就会和组件代码打包进同一个 chunk，并在加载时同步注入
注意：不要在动态导入外层单独写 import('./theme.css') —— 它既不参与代码分割，也不触发注入，纯属无效操作。
主题切换等条件加载场景怎么办
需要 CSS 独立切换时，不能靠 import()，得走预编译 + DOM 控制路线：
立即学习“前端免费学习笔记（深入）”；
- 提前用构建工具生成多套 CSS 文件，如
light.theme.css、dark.theme.css - 用
<link rel="stylesheet" href="light.theme.css" id="theme-link">静态引入一个占位 link - 切换时只改
document.getElementById('theme-link').href或控制disabled属性
这种方式绕过构建时限制，也避免重复请求——浏览器会缓存已加载的 CSS 文件，切换时只是启用/禁用。
容易被忽略的 SSR 和 iframe 兼容性问题
服务端渲染（SSR）环境下，动态导入的 CSS 不会在首屏 HTML 中内联，导致 FOUC（闪白）或样式缺失。必须配合框架的 SSR 样式收集机制（如 Vue 的 renderStyles、Next.js 的 getServerSideProps 中注入）。iframe 内部若需懒加载 CSS，也得确保父页面未禁用 document.write 或 CSP 策略拦截了 <style> 插入——这些细节在开发阶段几乎不暴露，上线后才突然失效。
