全局CSS只能在_pages Router的\_app.js_或_App Router的app/layout.tsx_顶层静态导入；\_app.js中报错主因是混用路由、导入位置非首行、路径错误或CSS被模块化处理。
全局 CSS 只能在 _app.js（Pages Router）或 app/layout.tsx（App Router）中顶层静态导入，其他任何位置都会报错或失效。
为什么 _app.js 里 import 全局 CSS 会报错？
常见错误信息是：Global CSS cannot be imported from files other than your Custom _app.js。这通常不是因为你用了 _app.js，而是因为：
- 你实际用的是 App Router（项目里有
app/目录且未禁用），但还在 Pages Router 的旧路径下写_app.js—— Next.js 13+ 会直接忽略它，且禁止从非根布局文件导入全局 CSS -
import '../styles/global.css'没写在_app.js文件最顶部：它必须是第一个语句，不能在import React或组件定义之后 - 你把 import 写进了组件函数体、
useEffect、或条件逻辑里 —— SSR 阶段无法提取样式依赖 - CSS 文件本身含
:global、module后缀、或被postcss.config.js错误配置为模块化处理
_app.js 中导入全局 CSS 的硬性要求
仅适用于 Pages Router（即项目结构含 pages/ 目录，且 pages/_app.js 是唯一自定义根组件）：
-
import必须出现在文件首行，无任何前置代码（包括注释也不建议放上面） - 只能导入一次，不能在
pages/index.js或其他页面里重复import '../styles/global.css' - 不能动态导入：
import('./styles/global.css')或require('../styles/global.css')均无效 - 如果用了 Tailwind，
@tailwind base、@tailwind components、@tailwind utilities必须全部写在该 CSS 文件内，不能拆开 - 该 CSS 文件不能包含
@layer以外的 PostCSS 特性（如未配好postcss.config.js，会导致构建失败）
App Router 下别碰 _app.js，改去 app/layout.tsx
App Router 已废弃 _app.js，强行保留并导入 CSS 不仅无效，还会触发构建警告甚至样式丢失：
立即学习“前端免费学习笔记（深入）”；
- 全局样式必须写在
app/layout.tsx（或.js）顶层，且路径要对：比如import './globals.css'（推荐放app/globals.css）或import '../styles/global.css' - 不能加
'use client'—— 导入 CSS 是服务端行为，加了反而可能阻断 SSR 样式注入 - 如果混用 Pages Router 和 App Router（即同时存在
pages/和app/），两套路由的全局样式互不影响：Pages 页面走pages/_app.js，App 页面走app/layout.tsx -
app/layout.tsx中的 CSS 导入只作用于 App Router 路由，对pages/下的页面完全无效
最容易被忽略的兼容细节
很多人卡在“明明按文档写了 import，样式还是不生效”，问题往往出在边界情况：
- 项目升级到 Next.js 13+ 后没删掉旧的
pages/_app.js，又新建了app/layout.tsx—— 此时两个文件都存在，但只有后者生效；旧文件里的 import 会被静默忽略，还可能干扰 HMR - CSS 文件路径写错：比如
import '../styles/global.css'在app/layout.tsx中，但../styles/实际相对于app/目录并不存在，应改为import '@/styles/global.css'并配好tsconfig.json的baseUrl - 使用了 CSS-in-JS 库（如 Emotion）或 styled-components，它们的全局样式注入机制与 Next.js 内置 CSS 处理冲突，需单独配置 SSR 支持
- 开发时热更新没刷新样式缓存，尤其是改完
globals.css后没重启 dev server，容易误判为导入失败
