CSS 模块

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

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

示例

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

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 扩展名的文件启用。常规的 <link> 样式表和全局 CSS 文件仍然受支持。

在生产环境中，所有 CSS 模块文件将自动合并为多个经过压缩和代码拆分的 .css 文件。这些 .css 文件代表了应用程序中的热执行路径，确保为应用程序加载最少数量的 CSS。

全局样式

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

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

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

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

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

// 这些样式将应用到应用程序中的每个路由
import './global.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

外部样式表

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

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 包含以下附加功能以提升样式编写的体验：

使用 next dev 本地运行时，本地样式表（无论是全局还是 CSS 模块）将利用快速刷新功能，在保存编辑时立即反映更改。
使用 next build 构建生产环境时，CSS 文件将被捆绑为更少的压缩 .css 文件，以减少获取样式所需的网络请求数量。
如果禁用 JavaScript，在生产构建 (next start) 中仍会加载样式。然而，next dev 仍需要 JavaScript 以启用快速刷新。

示例

全局样式

外部样式表

附加功能

On this page