await import('./x.css')在Vite中无效，因其返回空模块且不触发CSS注入；真正可行的是手动创建<link>、禁用切换主题或让CSS随异步组件打包注入。
await import('./x.css') 在 Vite 里“没效果”，不是你写错了，而是它本就不该这么用——Vite 不会在运行时把 CSS 注入页面，动态 import() 返回的是空模块，default 是 undefined，样式根本不会上屏。
为什么 await import('./theme.css') 不生效
这是 JS 运行时行为和构建时样式注入机制的根本错配：
-
import()是 ECMAScript 规范的异步模块加载语法，只对 JS 模块有意义；CSS 文件不是 JS 模块，Vite 默认不把它编译成可执行的注入逻辑 - Vite 开发时靠 HMR runtime 动态插入
<style>标签，构建时靠css.extract合并进style.css，两者都不响应import()的调用时机 - 即使你加了
css.modules: { generateDeclarations: true }或配了preprocessorOptions，也只影响模块化或预编译阶段，不影响运行时导入路径解析 - 控制台看不到报错，但 Network 面板里查不到 CSS 请求，DOM 中也找不到对应
<style>或<link>
真正能落地的异步 CSS 加载方式
别试图让 CSS “自己动起来”，而是让 JS 控制它的加载生命周期：
- 用
document.createElement('link')手动插入，配合onload和onerror做状态管理 - 封装成 Promise 工具函数，比如
loadCSS('./dark.theme.css')，返回加载完成的 Promise - 主题切换场景下，优先禁用旧
<link disabled>，再插入新 link，避免闪屏或样式竞争 - 若需搭配组件懒加载，把 CSS 放在异步组件内部
import './Card.module.css'—— 它会随组件 chunk 一起被打包、注入，顺序可控
想让 import('./x.css') 看似“有效”的临时方案（不推荐生产）
仅限调试或极简原型，且必须满足两个硬条件：
立即学习“前端免费学习笔记（深入）”；
- Vite 版本 ≥ 4.5，且项目中已启用
build.rollupOptions.output.manualChunks显式拆分 CSS chunk - 在
vite.config.ts中配置：css: { devSourcemap: true, extract: false }（开发模式禁用提取），否则构建后仍为空模块 - 必须配合一个自定义插件，在
transform钩子中识别import('./x.css')并注入 runtime 注入逻辑（类似 style-loader 行为），但会破坏 HMR 稳定性 - 所有被
import()的 CSS 文件必须是.module.css或带lang="scss"的模块化格式，否则类名无法被 JS 引用，失去模块意义
最易被忽略的一点：CSS 的“异步”从来不是指文件加载时机，而是指**应用时机**。真正需要关注的不是“怎么 import CSS”，而是“什么时候该让它生效、什么时候该撤掉”。用 <link disabled> 切换、用 useEffect 或 onMounted 控制挂载/卸载，比强行塞进 import() 可靠得多。
