全局CSS只能在_app.js或layout.tsx中导入，因Next.js需在构建期提取样式注入<head>；组件内导入会导致SSR丢失、重复注入或解析失败。
Global CSS cannot be imported from files other than your Custom _app.js 报错原因
这个错误不是 Next.js 故意刁难，而是构建机制决定的：它需要在服务端渲染（SSR）或静态生成（SSG）阶段就提前提取、去重、注入全局样式到 <head> 中。普通组件里的 import './styles.css' 是运行时行为，Webpack 和 Next 编译器根本无法在构建期识别这是“全局依赖”，也就没法做样式收集和注入。
为什么不能在 Server Component 里 import 全局 CSS
Next.js 15 默认禁止服务端组件加载全局 CSS，因为这类样式会污染整个 HTML 文档（比如重置 body、h1），而 Server Component 的输出是纯 HTML 字符串，没有 DOM 环境，也不该承担样式副作用。
-
document在服务端不存在，但更关键的是：样式注入必须发生在 HTML 构建前，而不是组件 render 时 - 如果允许组件内 import，多个页面/组件重复引入同一份
globals.css，会导致<style>标签被多次插入，CSS 优先级混乱、重置逻辑冲突 - App Router 下甚至直接禁用该行为——报错信息明确指向“only in
app/layout.tsx”或“only inpages/_app.tsx”
哪些地方看似能用，其实踩坑高发
很多人试过这些写法，结果开发时“好像生效”，build 后全失效：
- 在
pages/index.tsx顶部写import '../styles/globals.css'—— 构建时报错，或 SSR 阶段样式丢失 - 在
app/page.tsx里useEffect(() => { import('../styles/reset.css') })—— 动态 import 不触发全局样式注入，只返回 Promise，且 SSR 会报ReferenceError: document is not defined - 把
globals.css放进app/components/Header.tsx并 import —— 即使加了"use client"，也只会让样式在客户端局部生效，服务端 HTML 里没有对应<style> - 误以为
@tailwind base可以拆开写：在app/layout.tsximport./base.css，又在app/components/Button.tsximport./components.css—— Tailwind 指令必须共存于同一文件，否则 PostCSS 解析失败
真正安全的引入位置只有两个
别猜，直接看项目结构：
立即学习“前端免费学习笔记（深入）”；
- 有
app/目录（哪怕只有app/layout.tsx）→ 全局 CSS 必须放在app/layout.tsx顶层，路径如import './globals.css'或import '@/styles/globals.css' - 只有
pages/目录，没app/→ 必须在pages/_app.tsx最顶行（前面不能有任何代码、空行、注释），写import '../styles/globals.css' - 两者都有？那它们互不干扰：
pages/下的页面走_app.tsx，app/下的路由走layout.tsx，各自管各自的全局样式
最容易被忽略的其实是路径拼错、_app.tsx 文件实际没被 Next.js 加载（比如你改了文件名但没更新导出）、或者你以为在 Pages Router 却早已被 App Router 接管——这些都不会报语法错误，但 build 后样式彻底消失。
