必须先确认路由系统：Pages Router需有pages/_app.js且无app/目录，App Router需有app/layout.tsx；全局CSS须在对应根布局首行静态导入，不可动态或条件加载，且不能含模块化配置；局部样式仅认.module.css命名并组件内导入；Tailwind须全注入同一全局CSS文件。
必须分清路由系统，否则全局 CSS 会静默失效或直接报错。 Next.js 14 不再容忍模糊路径或混用模式——Pages Router 和 App Router 的样式入口完全隔离，且编译期强制校验导入位置。
确认你用的是 Pages Router 还是 App Router
这是所有操作的前提，错一步全盘无效：
- 项目里有
pages/_app.js（或_app.tsx），且app/目录不存在或被next.config.js显式禁用 → 用 Pages Router - 项目里有
app/layout.tsx（或.js），且未禁用 App Router → 用 App Router - 两者共存（
pages/和app/都存在）→ 全局样式必须分别配置：Pages 页面走pages/_app.js，App 页面走app/layout.tsx
全局 CSS 只能在根布局文件顶层静态导入
Next.js 14 在 SSR 构建阶段靠静态分析提取全局样式，任何运行时、嵌套、条件或动态行为都会导致样式丢失：
-
pages/_app.js：必须第一行就是import '../styles/globals.css'，前面不能有注释、空行、import React或任何语句 -
app/layout.tsx：同样第一行写import './globals.css'（推荐放app/globals.css），不能加'use client' - 绝对不能在组件函数体内、
useEffect里、if分支中、或用import('./styles.css')动态加载 - 该 CSS 文件必须是纯全局样式：不含
:global、不叫globals.module.css、不能被next.config.js配置为自动模块化（如cssModules: { auto: true }）
局部样式只能用 .module.css 后缀并在组件内导入
Next.js 对“组件级样式”只认一种形式：文件名带 .module，且导入方式必须匹配：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“前端免费学习笔记（深入）”；
- 正确命名：
Button.module.css，然后在组件中写import styles from './Button.module.css' - 错误命名：
Button.css、Button.scss或Button.module.scss（未启用 Sass 支持时）→ 会被当作全局样式处理，一旦在组件里 import 就触发Global CSS cannot be imported from files other than your Custom _app.js - 不能在
_app.js或app/layout.tsx中 import.module.css，否则构建失败：Module parse failed - 支持 Sass/Less：装好
sass或less后，可用Button.module.scss，无需额外配置
Tailwind 必须全部注入到全局 CSS 文件中
Tailwind 不是普通 CSS 文件，它是通过 PostCSS 插件在构建时把工具类编译进最终输出的。因此：
-
@tailwind base、@tailwind components、@tailwind utilities必须全部写在同一个全局 CSS 文件里（如globals.css），不能拆开放到多个文件或组件中 - 不能在组件里
import 'tailwind.css'—— 它根本不存在，也不该存在 - 如果用了
@layer，确保postcss.config.js已配好，否则构建可能失败或热更新不生效 - 修改
globals.css后热更新不生效？先检查是否意外启用了cssModules: { auto: true }，它会让全局 CSS 被误判为模块
最容易被忽略的一点：全局 CSS 的“全局”是按路由系统隔离的。app/layout.tsx 导入的样式对 pages/ 下的页面完全无效，反之亦然。如果你混用双路由，就得维护两套全局样式入口，而不是指望一个文件管全部。
