动态 import('./x.css') 不生效，因构建工具默认不将 CSS 视为可动态加载模块：Webpack 报错或静默忽略，Vite 返回 { default: undefined } 且不注入样式；根本原因是 import() 为运行时行为，而 CSS 注入依赖构建时 loader 链（如 style-loader 或 Vite runtime），未显式配置则仅作字符串处理。
动态 import('./x.css') 为什么在 Vite/Webpack 里不生效
这不是你代码写错了，而是构建工具默认不把 CSS 当作可动态加载的模块处理。Webpack 会直接报 Cannot find module './theme.css' 或静默忽略；Vite 虽能解析语法，但返回的是空对象 { default: undefined }，CSS 根本不会注入到 。
根本原因在于：import() 是 JS 运行时行为，而 CSS 注入依赖构建时的 loader 链（比如 style-loader 或 Vite 的 runtime 注入逻辑）。没有显式配置，构建工具就只把它当普通字符串路径处理。
- Webpack 需要额外配置
resolve.extensions并添加css-loader+style-loaderrule，且css-loader必须启用esModule: true - Vite 默认支持，但仅对
.module.css类型触发样式注入；普通.css文件需配合build.rollupOptions.output.manualChunks控制打包粒度 - 两者都**不提供卸载机制**：样式一旦注入，无法随组件卸载自动移除，容易造成污染
真正可用的模块级 CSS 拆分方式：路由/组件级懒加载
不要试图“运行时 import CSS”，而是让 CSS 成为 JS 模块的附带产物——由构建工具统一调度、提取、注入。
- 在 React Router 的 lazy route 中写
import('./Dashboard.module.css')，它会和组件一起被打包进同一个 chunk，Vite/Webpack 自动提取并注入 - Vue 用
defineAsyncComponent加载组件时，其内部的import './Card.module.css'也会被识别为依赖，随组件 bundle 加载 - 关键点：CSS 必须是
.module.css（或启用了 CSS Modules）才能保证作用域隔离；普通.css即使拆分也无意义，仍会全局污染
主题切换等条件场景别用动态 import，改用 CSS 变量 + <link disabled>
按主题、设备、用户偏好切换样式，不是“加载新 CSS”，而是“启用已存在的一套规则”。硬上 import('./dark.css') 会导致 FOUC、SSR 不匹配、注入时机不可控。
立即学习“前端免费学习笔记（深入）”；
- 预编译多套主题 CSS：
light.theme.css、dark.theme.css，全部通过<link rel="stylesheet">预加载，但初始设disabled - 切换时只操作
document.querySelector('link[title="dark"]').disabled = false，浏览器原生支持，零 JS 解析开销 - 配合 CSS 变量定义主题基底：
:root { --bg: #fff; }和.theme-dark { --bg: #111; }，再让所有组件用var(--bg)，更轻、更稳、更易 SSR
PostCSS + postcss-import 是最稳妥的静态拆分方案
如果你只是想把 CSS 按组件/功能拆成小文件便于维护，又不想引入 JS 运行时逻辑，那就别碰动态加载——用编译期合并才是正解。
-
postcss-import在构建时把所有@import展开为内联内容，最终输出一个扁平 CSS 文件，零额外请求、零 FOUC、完美兼容 SSR - 必须把
postcss-import插件放在autoprefixer等其他插件之前，否则变量/自定义属性可能未被识别 - 组件 CSS 建议用下划线前缀命名，如
_button.css，避免被 Webpack/Vite 误认为入口文件导致打包异常 - 路径解析依赖
from参数或root配置，别靠相对位置“猜”——重命名父文件就可能报Failed to find '~/_button.css'
真正麻烦的从来不是“怎么拆”，而是“拆完怎么管生命周期、怎么保作用域、怎么躲过 SSR 水合失败”。动态 import CSS 听起来很酷，但落地时几乎每个环节都在埋坑。优先走构建时路径，把运行时逻辑留给真正需要它的场景。
