必须先确认使用 pages router 还是 app router：有 pages/_app.js 且无 app/ 目录为 pages router；有 app/layout.tsx 且未禁用 app router 为 app router；两者共存需分别处理全局 css。
必须先确认你用的是 Pages Router 还是 App Router，否则导入位置一错，样式就完全不生效。
怎么判断自己用的是 Pages Router 还是 App Router
看项目结构，不是看 Next.js 版本：
- 项目里有
pages/_app.js（或_app.tsx），且没有启用app/目录 → Pages Router - 项目里有
app/layout.tsx（或.js），且next.config.js没禁用 App Router → App Router - 两者共存（
pages/和app/都存在）→ 全局 CSS 必须分别处理，互不影响
混用路由系统却只配一个入口，是样式失效最常见原因。
Pages Router：必须在 pages/_app.js 顶层静态导入
import '../styles/globals.css' 必须是文件第一行，前面不能有任何内容——包括注释、空行、import React 都不行。
- ✅ 正确写法：
import '../styles/globals.css';紧跟文件开头，然后才是function MyApp() - ❌ 错误写法：把它写进
MyApp函数体内、useEffect里，或用import('./styles/globals.css')动态加载 - ⚠️
globals.css必须是纯 CSS 文件：不能叫globals.module.css，不能含:global{}，也不能被next.config.js配置为自动模块化（如cssModules: { auto: true }） - ⚠️ 如果用了 Tailwind，
@tailwind base、@tailwind components、@tailwind utilities必须全部写在这个文件里，拆开就无效
App Router：只认 app/layout.tsx 顶层导入
pages/_app.js 在 App Router 下完全被忽略，删掉更安全；强行保留还可能干扰构建。
- ✅ 推荐路径：
app/globals.css，并在app/layout.tsx第一行写import './globals.css' - ❌ 不要加
'use client'—— CSS 导入是服务端行为，加了反而可能阻断 SSR 样式注入 - ⚠️ 这个导入只影响
app/下的路由，对pages/页面毫无作用 - ⚠️ 路径写错很常见：
import '../styles/globals.css'可能因相对位置不对而 404，建议用./globals.css放在同级目录下
为什么样式导入后刷新就丢失或报错
这些现象基本都指向同一个问题：CSS 文件本身或导入方式违反了 Next.js 的 SSR 样式收集机制。
-
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 页面，反之亦然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
