必须在对应路由系统的根布局文件顶层静态导入：Pages Router需在pages/_app.js首行导入，App Router需在app/layout.tsx首行导入，二者不可混用且互不影响。
必须在对应路由系统的根布局文件顶层静态导入，其他任何位置都会报错或静默失效。
确认你用的是 Pages Router 还是 App Router
这是所有操作的前提，搞错就全错：
- 项目里有
pages/_app.js（或_app.tsx），且没有启用app/目录 → 用 Pages Router - 项目里有
app/layout.tsx（或.js），且next.config.js没禁用 App Router → 用 App Router - 两者共存（
pages/和app/都存在）→ 全局样式需分别处理：Pages 页面走pages/_app.js，App 页面走app/layout.tsx
Pages Router：只在 pages/_app.js 顶层导入
Next.js 只认这个文件作为全局样式入口，且规则极严：
-
import '../styles/globals.css'必须是文件第一行，前面不能有任何语句、注释甚至空行 - 不能写在
MyApp函数体内、useEffect里，也不能用import('./styles/globals.css')动态加载 -
globals.css必须是纯 CSS 文件：不含:global、不叫globals.module.css、未被next.config.js配置为自动模块化（如cssModules: { auto: true }） - 如果用了 Tailwind，
@tailwind base、@tailwind components、@tailwind utilities必须全部写在这个文件里，不能拆开
App Router：只在 app/layout.tsx 顶层导入
_app.js 在 App Router 下完全无效，强行保留还会干扰构建：
立即学习“前端免费学习笔记（深入）”；
- 路径推荐用
app/globals.css，然后在app/layout.tsx第一行写import './globals.css' - 不能加
'use client'—— CSS 导入是服务端行为，加了反而可能阻断 SSR 样式注入 - 该导入只影响
app/下的路由，对pages/下的页面毫无作用 - 如果混用双路由，
pages/index.js不会自动继承app/globals.css，得另配pages/_app.js
常见报错和绕不开的坑
这些错误几乎都源于路径、时机或配置错位：
-
Global CSS cannot be imported from files other than your Custom _app.js：大概率你用的是 App Router，却还在pages/_app.js里写导入 - 样式生效但刷新后丢失：CSS 文件里用了
@layer或其他 PostCSS 特性，但没配postcss.config.js - 页面空白或布局错乱：全局 CSS 里写了
body { display: none }这类重置规则，没意识到它会影响所有路由 - 热更新不生效：修改
globals.css后没触发重新构建，或文件被缓存；检查是否意外启用了cssModules: { auto: true }
最容易被忽略的一点：全局 CSS 的“全局”是按路由系统隔离的。App Router 的 app/layout.tsx 导入不会泄漏到 Pages Router 页面，反之亦然。混用双路由时，你得维护两套独立的全局样式入口。
