Next.js 13+ App Router 下不能在 _app.js 导入全局 CSS，因其已弃用 _app.js；全局样式须在 app/layout.tsx 顶层导入，而 Pages Router 才需且必须在 pages/_app.js 中导入。
为什么不能在 _app.js 里直接 import 'styles/global.css'
Next.js 13+（App Router）默认不支持在 _app.js 中直接导入 CSS 文件——它会报错 Global CSS cannot be imported from files other than your Custom <code>_app.js。但注意：这个错误只在 App Router 下出现；如果你用的是 Pages Router（即项目里还有 pages/ 目录、且 _app.js 存在于该目录下），那反而**必须**在 _app.js 导入全局样式，否则样式不会生效。
关键判断点：先确认你用的是 Pages Router 还是 App Router。
- Pages Router：有
pages/_app.js，无app/目录，或app/目录未启用 - App Router：有
app/layout.js或app/layout.tsx，且next.config.js没禁用 App Router
Pages Router 下正确引入全局 CSS 的方式
必须在 pages/_app.js 的顶层作用域导入，且只能导入一次。不能放在组件内部、useEffect 里，也不能分散在多个文件中导入同一份 CSS。
- ✅ 正确写法：
import '../styles/global.css'; <p>function MyApp({ Component, pageProps }) { return <Component {...pageProps} />; } export default MyApp; - ❌ 错误写法：
import('./styles/global.css')（动态导入不触发全局样式注入） - ❌ 错误写法：在
pages/index.js里也import '../styles/global.css'（会触发重复注入警告甚至样式冲突） - ⚠️ 注意：
global.css里不能包含@layer或@tailwind等需要 PostCSS 处理的指令，除非你已配好postcss.config.js
App Router 下全局样式该放哪？不是 _app.js
App Router 没有 _app.js 的概念——它用 app/layout.js 作为根布局。全局 CSS 必须在这里导入，且必须是**客户端组件**（加 'use client' 不必要，但不能是服务端组件的副作用）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确路径：
app/layout.js（或.tsx），顶层import：import '../styles/global.css'; <p>export default function RootLayout({ children }) { return (</p><html lang="en"><body>{children}</body></html> ); } - ⚠️ 如果你混用了 Pages Router 和 App Router（比如同时有
pages/和app/），全局样式需按路由类型分别处理：Pages 页面走pages/_app.js，App 页面走app/layout.js - ⚠️
app/layout.js中的 CSS 导入只影响 App Router 路由；Pages Router 页面仍需自己的_app.js来加载样式
遇到 Cannot find module 'xxx.css' 怎么办
这通常不是路径问题，而是模块解析缺失。Next.js 默认支持 CSS/Sass/PostCSS，但如果你删了 next.config.js 或改过 webpack 配置，可能关掉了 CSS 支持。
- 检查
next.config.js是否意外添加了webpack: (config) => { /* 删除了 css rule */ } - 确保
styles/在src/下？如果是，路径应为src/styles/global.css，导入时写import 'src/styles/global.css'（注意：不能用../跳出src，Next.js 默认只允许从src或项目根开始解析） - 如果用了 TypeScript，确认
next-env.d.ts里有/// <reference types="next/image"></reference>，但不需要额外声明 CSS 模块（Next.js 内置支持） - 重启开发服务器：CSS 支持是启动时决定的，改配置后必须
ctrl+C → npm run dev
真正容易被忽略的是：App Router 和 Pages Router 的共存状态。很多人升级到 Next.js 13 后保留了 pages/，却只改了 app/layout.js，结果 Pages 页面样式全丢——这时候得双线并行处理，而不是只盯一个入口文件。
