全局 css 在 turbopack 中必须置于 app/ 目录下并由 app/layout.tsx 顶层静态 import './global.css' 引入，不可放于 src/ 或 pages/_app.tsx，不可动态导入或通过 加载，否则静默失效。
全局 CSS 在 Turbopack 中无需配置即可生效，但必须放在正确的路径、被正确的文件导入，否则会静默失效或触发构建错误。
全局 CSS 文件必须放在 app/ 目录下且被 layout.tsx 导入
Turbopack（作为 Next.js 15+ 默认开发 bundler）只识别 app/ 目录下的全局样式入口。它不处理 pages/_app.tsx 中的导入，也不扫描 src/ 或根目录下的 .css 文件。
-
app/global.css是合法路径；src/styles/global.css或styles/global.css会被完全忽略 - 必须在
app/layout.tsx（或app/layout.jsx）中通过import './global.css'显式引入 —— 这行代码不能写在page.tsx或组件里 - 如果项目使用 App Router 但没定义
app/layout.tsx，Turbopack 不会报错，但全局样式根本不会注入到 HTML 中
import 语句必须是顶层 ESM 导入，不能包裹在条件或函数中
Turbopack 的 CSS 收集阶段发生在模块解析期，它只提取静态 import 语句。动态导入、require()、或运行时条件判断都会导致样式丢失。
- ✅ 正确：
import './global.css'（位于app/layout.tsx文件顶部） - ❌ 错误：
if (process.env.NODE_ENV === 'development') import './global.css' - ❌ 错误：
const loadCSS = () => import('./global.css') - ❌ 错误：
require('./global.css')（CommonJS 方式，Turbopack 不支持）
全局 CSS 无法通过 <link rel="stylesheet"> 加载
Turbopack 的 dev server 不提供静态资源服务逻辑来托管外部 CSS 文件。所有样式必须经由模块系统进入依赖图，才能参与 HMR 和增量计算。
-
<link href="/global.css" rel="stylesheet">在app/layout.tsx的中会请求 404，因为 Turbopack 不自动 serve/public/global.css以外的路径 - 即使把 CSS 放进
/public/global.css，它也不会被纳入 Turbopack 的构建图，修改后不会触发热更新 - 若坚持用
<link>，需手动启用next dev --webpack回退到 Webpack 模式，失去 Turbopack 的全部优势
避免与 CSS Modules 混淆导致样式未生效
Turbopack 对 .module.css 和普通 .css 的处理逻辑完全不同：前者生成局部作用域类名，后者直接注入全局规则。但命名错误会让两者行为错位。
- 文件命名为
Button.module.css却在layout.tsx中import './Button.module.css'→ 无效（模块样式不应用于全局注入） - 文件命名为
global.css却在组件中import styles from './global.css'→styles为空对象（非 module 文件不导出命名空间） - 检查是否误启用了
css-loader配置 —— Turbopack 不接受任何自定义 loader，强行加 webpack 配置会导致启动失败
最容易被忽略的是：Turbopack 不校验全局 CSS 内容合法性。哪怕你写了语法错误的 CSS（如 color: #ffg;），它也不会报错，而是静默跳过整条规则 —— 建议用 VS Code 的 CSS 插件实时校验，别等页面白屏才排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
