跳到主要内容

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目录内的任何布局、页面或组件中。

备注

这与 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>
)
}
备注

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

附加功能

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

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