Qwik 中不能用 await import('./style.css') 动态加载 CSS，因其构建机制不支持运行时 CSS 注入；必须通过组件级 import './X.module.css' 由构建工具静态提取并绑定到对应 JS chunk。
Qwik 中不能用 await import('./style.css') 动态加载 CSS
这不是写法错误，而是构建时机制不支持：Vite 或 Webpack 默认把 import('./x.css') 当作 JS 模块处理，返回空对象，CSS 根本不会注入。Qwik 的懒加载是基于序列化 HTML + 按需 fetch JS 的模型，它不接管 CSS 的运行时注入逻辑。你写的 await import('./Card.css') 会静默失败或报错，页面样式完全缺失。
真正有效的 CSS 懒加载必须绑定到组件级 JS chunk
Qwik 的 CSS 加载时机取决于组件是否被实际渲染和交互触发。只有当组件被 Qwik 的 component$ 定义、且该组件的 JS bundle 被下载后，其内部的 import './Button.module.css' 才会被构建工具提取并注入。
- 路由级懒加载：在
routeLoader$或useRouteLoader$触发的页面中，import './Page.module.css'会随组件 JS 一起被打包进该路由 chunk - 组件级懒加载：用
lazy$(() => import('./HeavyChart'))包裹的组件，其内部 CSS 自动归属到对应 chunk，首次交互才加载 - 不要在根布局或全局 layout 中 import 大量 CSS —— 它们会提前进入首屏 JS，破坏零 JS 启动目标
模块作用域失效是 SSR 和 iframe 场景下的隐藏雷区
Qwik 服务端序列化时，import styles from './Button.module.css' 生成的哈希类名（如 styles.root → Button_root_abc123）只存在于客户端 JS 执行上下文。这意味着：
- SSR 输出的 HTML 中，
className={styles.root}已转为静态字符串，但对应 CSS 文件若未在服务端预注入，首屏将无样式 - 如果组件被嵌入 iframe，而 iframe 的 document 不共享主页面的 CSS 注入 runtime，样式直接丢失
- 第三方库通过
innerHTML插入 DOM 时，无法访问styles对象，className="Button_root_abc123"这种硬编码类名不可靠
推荐做法：用 qwik-city 路由 + scoped CSS Modules + 构建时提取
Qwik 官方推荐路径是放弃“运行时动态 import CSS”，转而依赖构建工具链对 .module.css 的静态分析能力。关键点在于：
立即学习“前端免费学习笔记（深入）”；
- 所有样式必须写成
import styles from './X.module.css'，禁用@import和全局<link> - 确保构建配置启用 CSS Modules（Qwik CLI 默认开启），类名自动哈希并作用域隔离
- 利用
qwik-city的路由懒加载机制，让每个路由对应的 CSS 只随该路由 JS chunk 下载 - 如需主题切换，预编译
light.theme.css和dark.theme.css，用 JS 控制<link disabled>，而非动态 import
最易被忽略的一点：Qwik 的“零 JS 启动”只保障 HTML 渲染无 JS，但 CSS 仍需按 chunk 精确拆分——漏掉一个 import 或错放位置，就可能把 200KB CSS 提前塞进首屏资源。
