next.js 15 中全局 css 只能通过 app/layout.tsx（app router）或 pages/_app.tsx（pages router）顶层静态导入；判断依据是项目目录结构：有 app/ 目录则用 app/layout.tsx，仅含 pages/ 目录则用 pages/_app.tsx，两者共存时各自独立生效。
Next.js 15 中全局 CSS 只能通过 app/layout.tsx（App Router）或 pages/_app.tsx（Pages Router）顶层静态导入，其他任何位置都会触发 Global CSS cannot be imported from files other than your Custom _app.tsx 或类似构建错误。
怎么判断该用 app/layout.tsx 还是 pages/_app.tsx？
看项目目录结构，不是看 Next.js 版本号：
- 有
app/目录（哪怕只有app/layout.tsx），就用app/layout.tsx——_app.tsx被完全忽略 - 只有
pages/目录、没有app/，才用pages/_app.tsx - 两者共存？
pages/下的路由走_app.tsx，app/下的路由走app/layout.tsx，互不干扰
app/layout.tsx 里怎么写才不报错？
必须满足三个硬性条件，缺一不可：
- import 语句必须在文件最顶部第一行，前面不能有任何代码、注释甚至空行
- 路径必须是相对路径：
import './globals.css'（推荐放app/globals.css）或import '../styles/globals.css' - CSS 文件不能含
:global、不能是.module.css、不能被next.config.js中的cssModules: { auto: true }拦截为模块
错误示例：import('./globals.css')（动态）、if (true) { import './globals.css' }（条件）、import 'styles/globals.css'（绝对路径解析失败）
为什么开发时看着好使，next build 后样式全没了？
热更新会掩盖路径和加载时机问题，但构建阶段暴露真实逻辑：
-
_app.tsx实际没被加载（比如你误以为用 Pages Router，其实项目已启用 App Router） - 路径写错：比如
app/layout.tsx里写了import '../styles/globals.css'，但项目根目录下根本没有styles/目录 - CSS 文件里用了
@tailwind base却没配postcss.config.mjs，PostCSS 解析失败，整个文件被跳过 - 用了
use client——app/layout.tsx是服务端组件，加"use client"会破坏 SSR 样式注入时机
第三方库 CSS（如 Bootstrap、Ant Design）怎么加？
它们本质也是全局 CSS，规则完全一样：
- App Router：只允许在
app/layout.tsx顶层 import，例如import 'bootstrap/dist/css/bootstrap.min.css' - Pages Router：只允许在
pages/_app.tsx顶层 import - 禁止在任意组件里
import 'xxx.css'，哪怕加了"use client"—— 这会触发document is not defined或构建报错 - 如果库提供 CSS Modules 版本（如
antd/es/button/style/css），可按模块方式导入，但需确保组件标记"use client"
最容易被忽略的是：Tailwind 的 @tailwind 指令必须全部放在同一个 CSS 文件里，且该文件必须由 app/layout.tsx 或 _app.tsx 直接导入 —— 拆开、嵌套、或用 @import 分离，都会导致构建时样式丢失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
