CSS 模块

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

CSS 模块通过自动创建唯一的类名来本地范围化 CSS。这允许您在不同的文件中使用相同的类名而不担心冲突。这种行为使得 CSS 模块成为包含组件级别 CSS 的理想方式。

示例

CSS 模块可以被导入到应用目录内的任何文件中：

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

在生产中，所有 CSS 模块文件将自动合并为多个被压缩和代码分割的 .css 文件。这些 .css 文件代表应用程序中的热执行路径，确保加载到应用程序中的 CSS 最小化。

全局样式

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

note

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

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

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

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

app/layout.tsx

// 这些样式适用于应用程序中的每个路由
import './global.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

外部样式表

由外部包发布的样式表可以在应用程序目录中的任何位置导入，包括共置的组件：

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>
  )
}

note

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

附加功能

Next.js 包括一些附加功能，以提高添加样式的编写体验：

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

CSS 模块

示例​

全局样式​

外部样式表​

附加功能​

示例

全局样式

外部样式表

附加功能