CSS

Next.js 支持多种处理 CSS 的方式，包括

CSS 模块
全局样式
外部样式表

CSS 模块

Next.js 使用 .module.css 扩展名内置支持 CSS 模块。

CSS 模块通过自动创建唯一的类名来本地作用域 CSS。这允许您在不同的文件中使用相同的类名，而无需担心冲突。此行为使 CSS 模块成为包含组件级 CSS 的理想方式。

示例

CSS 模块可以导入到 app 目录内的任何文件中

app/dashboard/layout.tsx

import styles from './styles.module.css'
 
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section className={styles.dashboard}>{children}</section>
}

app/dashboard/styles.module.css

.dashboard {
  padding: 24px;
}

CSS 模块 **仅对扩展名为 .module.css 和 .module.sass 的文件启用**。

在生产环境中，所有 CSS 模块文件将自动连接到 **多个最小化和代码分割** 的 .css 文件中。这些 .css 文件代表应用程序中的热执行路径，确保加载应用程序绘制所需的最小 CSS 量。

全局样式

全局样式可以导入到 app 目录内的任何布局、页面或组件中。

值得注意:

这与 pages 目录不同，在 pages 目录中，您只能在 _app.js 文件中导入全局样式。

除非样式实际上是全局的，否则 Next.js 不支持使用全局样式，这意味着它们可以应用于所有页面，并且可以在应用程序的生命周期内存在。这是因为 Next.js 使用 React 的内置样式表支持与 Suspense 集成。此内置支持目前不会在您在路由之间导航时删除样式表。因此，我们建议使用 CSS 模块而不是全局样式。

例如，考虑一个名为 app/global.css 的样式表

app/global.css

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

在根布局 (app/layout.js) 中，导入 global.css 样式表以将样式应用于应用程序中的每个路由

app/layout.tsx

// These styles apply to every route in the application
import './global.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

外部样式表

外部包发布的样式表可以导入到 app 目录中的任何位置，包括并置组件

app/layout.tsx

import 'bootstrap/dist/css/bootstrap.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

**值得注意**：外部样式表必须直接从 npm 包导入或下载并与您的代码库并置。您不能使用 <link rel="stylesheet" />。

排序和合并

Next.js 通过自动分割（合并）样式表在生产构建期间优化 CSS。CSS 顺序由**您将样式表导入应用程序代码的顺序决定**。

例如，base-button.module.css 将在 page.module.css 之前排序，因为 <BaseButton> 在 <Page> 中首先导入

base-button.tsx

import styles from './base-button.module.css'
 
export function BaseButton() {
  return <button className={styles.primary} />
}

page.ts

import { BaseButton } from './base-button'
import styles from './page.module.css'
 
export function Page() {
  return <BaseButton className={styles.primary} />
}

为了保持可预测的顺序，我们建议以下操作

仅在一个 JS/TS 文件中导入 CSS 文件。
- 如果使用全局类名，请按您希望应用的顺序在同一文件中导入全局样式。
优先使用 CSS 模块而不是全局样式。
- 为您的 CSS 模块使用一致的命名约定。例如，使用 <name>.module.css 而不是 <name>.tsx。
将共享样式提取到单独的共享组件中。
如果使用Tailwind，请在文件顶部导入样式表，最好是在根布局中。
关闭任何自动排序导入的代码检查器/格式化程序（例如，ESLint 的sort-import）。这可能会无意中影响您的 CSS，因为 CSS 导入顺序**很重要**。

值得注意

CSS 顺序在开发模式下可能会有不同的行为，请始终检查构建结果（next build）以验证最终的 CSS 顺序。

您可以使用 next.config.js 中的cssChunking 选项来控制 CSS 的分块方式。

其他功能

Next.js 包含其他功能来改善添加样式的编写体验。

在使用 next dev 进行本地运行时，本地样式表（全局或 CSS 模块）将利用快速刷新功能，以便在保存编辑时立即反映更改。
在使用 next build 构建生产环境时，CSS 文件将捆绑到更少的压缩 .css 文件中，以减少检索样式所需的网络请求次数。
如果禁用 JavaScript，样式仍将在生产构建（next start）中加载。但是，next dev 仍然需要 JavaScript 才能启用快速刷新。