next.js 14 强制全局css仅能从_pages/_app.js或_app/layout.tsx顶层静态导入，因ssr需编译期提取样式；组件内导入会丢失构建后样式，且app router下_pages/_app.js被忽略。
Next.js 14 强制限制全局 CSS 的引入位置，不是为了增加复杂度，而是因为服务端渲染（SSR）阶段必须提前确定并注入样式——它需要在生成 HTML 之前就把所有全局样式收集完毕，而这个收集过程只认两个“可信入口”：pages/_app.js（Pages Router）或app/layout.tsx（App Router）。
为什么不能在组件里 import 全局 CSS？
Next.js 构建时靠静态分析提取全局样式。一旦 import '../styles/globals.css' 出现在组件函数体内、useEffect 里、条件分支中，或者被包裹在动态 import() 之后，Webpack/Next 就无法在编译期识别它为“全局依赖”，结果就是：开发时热更新可能让样式“看起来正常”，但 next build 后全局 CSS 完全丢失。
- ❌ 错误示例：
if (isClient) { import('./theme.css') }—— 运行时行为，SSR 阶段不可见 - ❌ 错误示例：
function MyApp() { import '../styles/globals.css'; return ... }—— 不是顶层语句，不被提取 - ✅ 正确做法：必须是文件最顶部第一行，前面不能有空行、注释、甚至
import React
为什么 _app.js 在 App Router 下会失效？
App Router 已废弃 pages/_app.js。如果你项目里同时存在 pages/ 和 app/ 目录，Next.js 会按路由路径分流处理：访问 /about（pages 下）走 pages/_app.js；访问 /dashboard（app 下）则完全忽略 _app.js，只认 app/layout.tsx 中的顶层 import './globals.css'。
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- ⚠️ 混用时最容易踩的坑：以为改了
_app.js就能统一控制所有页面样式，实际对app/路由零影响 - ⚠️
app/layout.tsx里加'use client'会导致 CSS 导入失败——样式注入是服务端行为，客户端指令会阻断它 - 路径必须写对：
import './globals.css'（推荐放app/globals.css），不能写成import '/styles/globals.css'（绝对路径不被支持）
为什么 .module.css 可以在组件里 import？
CSS Modules 是另一套机制：它不依赖 SSR 提前收集，而是把样式编译成带哈希后缀的局部类名，在 JS 层通过 className={styles.button} 注入。所以只要文件名是 Button.module.css，Next.js 就自动启用模块化，且只允许这种后缀用于组件内导入。
- ❌
Button.css或Button.scss在组件里 import → 报Global CSS cannot be imported from files other than your Custom _app.js - ✅
Button.module.css+import styles from './Button.module.css'→ 安全，样式作用域隔离 - 注意：Tailwind 不是靠 import 加载的，它的工具类必须全部写在那个全局 CSS 文件里（如
globals.css），不能拆开或分散到多个文件
真正容易被忽略的是：开发时样式“似乎生效”，不代表构建后也生效；重复的 <link> 标签往往不是你写的代码重复，而是 Next.js v14.0.x 早期版本的 CSS 处理管道缺陷——升级到 v14.2.0+ 并清理 .next 缓存才能彻底解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
