如何在Next.js14中正确引入全局CSS与局部模块样式-css教程-PHP中文网

必须先确认路由系统：pages router需有pages/_app.js且无app/目录，app router需有app/layout.tsx；全局css须在对应根布局首行静态导入，不可动态或条件加载，且不能含模块化配置；局部样式仅认.module.css命名并组件内导入；tailwind须全注入同一全局css文件。

如何在next.js14中正确引入全局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 构建阶段靠静态分析提取全局样式，任何运行时、嵌套、条件或动态行为都会导致样式丢失：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

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，且导入方式必须匹配：

正确命名：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 被误判为模块