错误源于全局CSS未在正确位置静态导入：Pages Router需在pages/_app.js首行导入，App Router需在app/layout.tsx首行导入，其他任何位置均触发报错。
Global CSS cannot be imported from files other than your Custom _app.js 报错怎么修？
这个错误根本不是“不能导入”，而是 Next.js 在构建时没在正确位置找到全局 CSS 的静态 import。它只认两个地方：Pages Router 的 pages/_app.js（或 _app.tsx），或者 App Router 的 app/layout.tsx（或 .js）。其他任何位置——比如 pages/index.js、components/Header.tsx，甚至 _app.js 里函数体内——都会触发该报错。
- 检查项目结构：有
app/layout.tsx 且没禁用 App Router？那就别碰 pages/_app.js，删掉或重命名它，否则会干扰构建
- 确认 import 是否真在文件第一行：前面不能有空行、注释、
import React 或任何代码
- 搜索整个项目，删掉所有其他地方的
import '../styles/globals.css'（包括页面、组件、自定义 hooks）
- 如果用了 Tailwind，确保
@tailwind base 等指令全写在那个被 import 的 CSS 文件里，而不是拆开塞到多个文件
App Router 下为什么 _app.js 里的 import 不生效？
因为 App Router 已废弃 _app.js。Next.js 13+ 启用 App Router 后，pages/_app.js 被完全忽略——你写在里面，它既不报错也不加载，样式自然丢失。
- 全局 CSS 必须放在
app/globals.css（推荐路径），并在 app/layout.tsx 顶部第一行写 import './globals.css'
- 绝对不要加
'use client'：CSS 导入是服务端行为，加了反而可能阻断 SSR 样式注入
-
app/layout.tsx 中的 import 只影响 app/ 下的路由，对 pages/index.js 等 Pages Router 页面完全无效
- 如果混用双路由（
pages/ 和 app/ 同时存在），就得分别配：Pages 页面走 pages/_app.js，App 页面走 app/layout.tsx
为什么样式刷新后丢失或热更新不生效？
这通常不是配置错，而是 CSS 文件本身越界了。
-
globals.css 里写了 body { display: none } 或重置类名（如 .container）？它会影响所有路由，包括 _document 渲染阶段，可能导致空白页
- 用了
@layer、@custom-media 等 PostCSS 特性？必须配好 postcss.config.js，否则构建时解析失败，样式静默失效
- 文件名带
.module.css 后缀，或被 next.config.js 误设为模块化（如 cssModules: { auto: true }）？全局 CSS 必须是纯 CSS，不能是模块
- 修改
globals.css 后 dev server 没反应？重启 npm run dev，Next.js 的 CSS 热更新对顶层全局文件支持不稳定
Water.css 或其他第三方 CSS 怎么安全引入？
直接 import 第三方 CSS 文件没问题，但路径和时机必须守死规矩。
- 放
public/css/water.css？不行：public/ 下的文件只能通过 <link href="/css/water.css"> 引入，不能用 import，否则报错
- 正确做法：把
water.css 放进 styles/ 或 app/ 目录下，然后在对应根布局顶层 import（如 app/layout.tsx 中 import '../styles/water.css'）
- 别用
import('./water.css') 动态加载——SSR 阶段无法提取样式依赖，首屏无样式
- 如果要用 Sass/Less，确保已装
sass 或 less，Next.js 默认支持，但 import 路径仍需静态、顶层
app/layout.tsx 且没禁用 App Router？那就别碰 pages/_app.js，删掉或重命名它，否则会干扰构建 import React 或任何代码 import '../styles/globals.css'（包括页面、组件、自定义 hooks） @tailwind base 等指令全写在那个被 import 的 CSS 文件里，而不是拆开塞到多个文件 _app.js。Next.js 13+ 启用 App Router 后，pages/_app.js 被完全忽略——你写在里面，它既不报错也不加载，样式自然丢失。
- 全局 CSS 必须放在
app/globals.css（推荐路径），并在app/layout.tsx顶部第一行写import './globals.css' - 绝对不要加
'use client'：CSS 导入是服务端行为，加了反而可能阻断 SSR 样式注入 -
app/layout.tsx中的 import 只影响 app/ 下的路由，对pages/index.js等 Pages Router 页面完全无效 - 如果混用双路由（
pages/和app/同时存在），就得分别配：Pages 页面走pages/_app.js，App 页面走app/layout.tsx
为什么样式刷新后丢失或热更新不生效？
这通常不是配置错，而是 CSS 文件本身越界了。
-
globals.css 里写了 body { display: none } 或重置类名（如 .container）？它会影响所有路由，包括 _document 渲染阶段，可能导致空白页
- 用了
@layer、@custom-media 等 PostCSS 特性？必须配好 postcss.config.js，否则构建时解析失败，样式静默失效
- 文件名带
.module.css 后缀，或被 next.config.js 误设为模块化（如 cssModules: { auto: true }）？全局 CSS 必须是纯 CSS，不能是模块
- 修改
globals.css 后 dev server 没反应？重启 npm run dev，Next.js 的 CSS 热更新对顶层全局文件支持不稳定
Water.css 或其他第三方 CSS 怎么安全引入？
直接 import 第三方 CSS 文件没问题，但路径和时机必须守死规矩。
- 放
public/css/water.css？不行：public/ 下的文件只能通过 <link href="/css/water.css"> 引入，不能用 import，否则报错
- 正确做法：把
water.css 放进 styles/ 或 app/ 目录下，然后在对应根布局顶层 import（如 app/layout.tsx 中 import '../styles/water.css'）
- 别用
import('./water.css') 动态加载——SSR 阶段无法提取样式依赖，首屏无样式
- 如果要用 Sass/Less，确保已装
sass 或 less，Next.js 默认支持，但 import 路径仍需静态、顶层
globals.css 里写了 body { display: none } 或重置类名（如 .container）？它会影响所有路由，包括 _document 渲染阶段，可能导致空白页 @layer、@custom-media 等 PostCSS 特性？必须配好 postcss.config.js，否则构建时解析失败，样式静默失效 .module.css 后缀，或被 next.config.js 误设为模块化（如 cssModules: { auto: true }）？全局 CSS 必须是纯 CSS，不能是模块 globals.css 后 dev server 没反应？重启 npm run dev，Next.js 的 CSS 热更新对顶层全局文件支持不稳定 import 第三方 CSS 文件没问题，但路径和时机必须守死规矩。
- 放
public/css/water.css？不行：public/下的文件只能通过<link href="/css/water.css">引入，不能用import，否则报错 - 正确做法：把
water.css放进styles/或app/目录下，然后在对应根布局顶层import（如app/layout.tsx中import '../styles/water.css'） - 别用
import('./water.css')动态加载——SSR 阶段无法提取样式依赖，首屏无样式 - 如果要用 Sass/Less，确保已装
sass或less，Next.js 默认支持，但 import 路径仍需静态、顶层
真正卡住人的从来不是“怎么写”，而是“在哪写”和“能不能写”。只要 import 出现在非根布局文件里，哪怕逻辑再对，Next.js 编译器也直接拒收——它不看内容，只认位置。
