Next.js 14 全局 CSS 必须按路由系统严格配置：Pages Router 唯一入口是 pages/_app.js 首行静态导入；App Router 唯一入口是 app/layout.tsx 首行静态导入；双路由共存需分别配置，混用或路径/命名/内容任一错误均导致样式失效或报错。
必须在对应路由系统的根布局文件顶部静态导入，且路径、命名、内容三者全对，缺一不可。
确认你用的是 Pages Router 还是 App Router
Next.js 14 同时支持双路由，但全局 CSS 的入口完全不同，混用必报错：
- 项目里有
pages/_app.js（或_app.tsx），且没有启用app/目录 → 用 Pages Router - 项目里有
app/layout.tsx（或.js），且未在next.config.js中禁用 App Router → 用 App Router - 两者共存（
pages/和app/都存在）→ 全局样式要分别配置，互不影响
常见错误：App Router 项目还留着 pages/_app.js 并在里面 import 全局 CSS，会触发 Global CSS cannot be imported from files other than your Custom _app.js —— 实际是因为 Next.js 已忽略该文件，它不再是“合法入口”。
Pages Router：_app.js 必须首行无条件导入
pages/_app.js 是 Pages Router 唯一被认可的全局样式收集点，规则极其严格：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“前端免费学习笔记（深入）”；
-
import '../styles/globals.css'必须是文件第一行，前面不能有任何注释、空行、import React或其他语句 - 不能写在
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 顶层 import
App Router 下 pages/_app.js 完全失效，全局 CSS 只能走 app/layout.tsx：
- 推荐路径：
app/globals.css，并在app/layout.tsx首行写import './globals.css' - 不能加
'use client'—— CSS 导入是服务端行为，加了可能阻断 SSR 样式注入 - 该导入只影响
app/下的路由，对pages/下的页面完全无效 - 如果混用双路由，
pages/index.js不会自动继承app/globals.css，需另配pages/_app.js
容易被忽略的一点：App Router 中若用了 Less/Sass 等预处理器，必须手动配置 next.config.js 并确保 loader 在构建阶段生效；否则 import './globals.less' 会静默失败，样式直接丢失，不报错也不生成对应 CSS。
