动态引入CSS应避免直接@import或link，而需通过构建工具统一调度：路由/组件级懒加载、预编译多主题CSS切换、CSS Modules绑定哈希类名，并注意SSR和iframe兼容性。
直接用 @import 或 HTML 的 <link> 做模块级动态引入，在大型项目里基本等于自找麻烦——它不参与构建依赖图、无法 tree-shaking、不能做作用域隔离，还容易引发样式重复或丢失。
为什么 import('./x.css') 在 Vite/webpack 里常“没效果”？
这不是你写错了，是构建工具默认不处理非 JS 资源的动态导入：
-
await import('./theme.css')在 Webpack 中会报错或静默失败，除非你手动配置resolve.extensions并加 rule 处理 CSS - Vite 虽支持该语法，但返回的是空模块（
{ default: undefined }），CSS 根本不会注入到页面 - 根本原因：动态
import()是 JS 运行时行为，而 CSS 注入依赖构建时的 loader 链（如style-loader或 Vite 的 CSS 注入 runtime）
真正能落地的按模块动态引入方式
不是靠“运行时 import CSS”，而是把 CSS 模块作为 JS 依赖的一部分，交由构建工具统一调度：
- 路由级拆分：在 React Router / Vue Router 的 lazy route 中，
import('./Page.module.css')和组件一起被React.lazy或defineAsyncComponent加载，Vite/Webpack 自动提取并注入对应样式 - 组件级懒加载：用
React.lazy包裹组件，其内部的import './Card.module.css'会随组件 bundle 一起加载，CSS 不会提前注入 - 条件加载（如主题切换）：预编译多套 CSS 模块（
light.theme.css、dark.theme.css），通过 JS 控制document.head中<link>的disabled属性切换，而非动态 import
CSS Modules + 动态类名绑定才是关键
所谓“模块化引入”，核心不在文件怎么加载，而在样式作用域是否可控。动态引入后如果还用 className="title"，照样全局污染：
立即学习“前端免费学习笔记（深入）”；
- 必须用
import styles from './Button.module.css'，再通过className={styles.root}绑定——哈希类名只在此处生效 - 多个模块组合？别拼字符串，用
clsx(styles.root, props.variant === 'primary' && styles.primary) - 想复用其他模块的样式？
composes语法要慎用：它不走 Webpack 别名解析，路径必须写死相对路径，否则静默失败
真正容易被忽略的点是：动态引入的 CSS 模块，其类名映射只存在于 JS 执行上下文里；HTML 模板、服务端渲染、或第三方库的 DOM 操作都无法访问这个映射——如果你的组件需要 SSR 或被 iframe 嵌入，就得额外处理样式提取逻辑。
