在Turbopack构建体系下如何快速引入并热更新CSS？-css教程-PHP中文网

turbopack原生支持import css文件，无需style-loader、css-loader等配置，自动解析、编译、注入dom并支持hmr；但需通过import显式引入（不可放/public用link），且仅.module.css自动启用css modules，postcss/tailwind须预构建。

在turbopack构建体系下如何快速引入并热更新css？

直接 import CSS 文件，无需 loader 配置

Turbopack 不需要像 Webpack 那样手动配置 style-loader、css-loader 或 postcss-loader。它原生支持 import './styles.css' 语法，并自动完成解析、编译、注入 DOM 和热更新 —— 只要文件被 JS 入口或组件显式引入，就进入构建链。

常见错误是把 CSS 放在 /public 目录下用 <link rel="stylesheet"> 引入，这完全绕过 Turbopack，热更新必然失效。

✅ 正确：在 app/layout.tsx 或页面组件顶部写 import '../styles/global.css'
❌ 错误：在 public/ 放 global.css，然后 HTML 中 <link href="/global.css">
⚠️ 注意：app/ 下的 CSS 必须通过 import，不能靠文件系统隐式加载（比如同名 page.tsx 旁放 page.module.css 不会自动生效）

CSS Module 和全局样式必须显式区分

Turbopack 会根据文件后缀和导入方式决定是否启用模块化作用域。它不靠 css-loader 的 modules 选项，而是靠命名约定：

Button.module.css → 自动启用 CSS Modules，类名被哈希化，导出对象如 { button: 'Button_button__abc123' }
globals.css 或 index.css → 默认为全局样式，无作用域隔离
不支持 .module.less 或 .module.sass —— 当前 Turbopack（v1.0+）只对 .module.css 做自动识别，其他预处理器需手动转译为 CSS 后再 import

如果你用了 @tailwindcss/jit 或自定义 PostCSS 插件，Turbopack 目前无法接入（它尚不支持插件系统），建议提前用 postcss-cli 构建好 CSS 再 import。

修改 CSS 后热更新卡顿？检查是否触发了全量重载

Turbopack 的热更新默认是局部的，但某些场景会退化为整页刷新：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

修改的是被多个 layout 共享的根级 globals.css，且该文件被 app/layout.tsx import → 通常仍为局部更新
修改的是 app/loading.tsx 或 app/error.tsx 中 import 的 CSS → 可能触发边界重载（因这些组件属于 React Server Component 边界）
使用了 use client 组件中动态 import() 加载 CSS → Turbopack 尚不支持动态 CSS 导入的 HMR，会 fallback 到 full reload
终端看到 [turbopack] rebuilding... (full) 而非 (incremental) → 说明某处依赖图被标记为“不可缓存”，常见于使用了 eval、new Function 或未声明的全局变量