CSS 模块

示例

基础 CSS 示例

Next.js 支持多种样式表类型，包括：

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

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

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

示例

例如，考虑 components/ 文件夹中可复用的 Button 组件：

首先，创建包含以下内容的 components/Button.module.css：

Button.module.css

/*
您无需担心 .error {} 会与其他 `.css` 或 `.module.css` 文件冲突！
*/
.error {
  color: white;
  background-color: red;
}

然后，创建 components/Button.js，导入并使用上述 CSS 文件：

components/Button.js

import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"
      // 注意 "error" 类是作为导入的 `styles` 对象的属性访问的
      className={styles.error}
    >
      销毁
    </button>
  )
}

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

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

全局样式

要向应用添加样式表，需在 pages/_app.js 中导入 CSS 文件。

例如，考虑以下名为 styles.css 的样式表：

styles.css

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

如果尚未存在，请创建 pages/_app.js 文件。然后，import styles.css 文件。

pages/_app.js

import '../styles.css'

// 新建 `pages/_app.js` 文件时需要此默认导出。
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

这些样式 (styles.css) 将应用于应用中的所有页面和组件。由于样式表的全局性质，为避免冲突，您只能在 pages/_app.js 中导入它们。

在开发环境中，以这种方式表达样式表允许您在编辑时热重载样式——这意味着您可以保持应用状态。

在生产环境中，所有 CSS 文件将自动合并为单个压缩的 .css 文件。CSS 的合并顺序将匹配 CSS 导入到 _app.js 文件的顺序。特别注意包含自身 CSS 的导入 JS 模块；JS 模块的 CSS 将按照与导入 CSS 文件相同的排序规则进行合并。例如：

import '../styles.css'
// ErrorBoundary 的 CSS 依赖于 styles.css 中的全局 CSS，
// 因此我们在 styles.css 之后导入它。
import ErrorBoundary from '../components/ErrorBoundary'

export default function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

外部样式表

Next.js 允许您从 JavaScript 文件导入 CSS 文件。这是可能的，因为 Next.js 扩展了 import 的概念，使其不限于 JavaScript。

从 `node_modules` 导入样式

自 Next.js 9.5.4 起，允许从 node_modules 导入 CSS 文件到应用的任何位置。

对于全局样式表，如 bootstrap 或 nprogress，应在 pages/_app.js 中导入文件。例如：

pages/_app.js

import 'bootstrap/dist/css/bootstrap.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

对于导入第三方组件所需的 CSS，可以在组件中进行。例如：

components/example-dialog.js

import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'

function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)

  return (
    <div>
      <button onClick={open}>打开对话框</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>关闭</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>你好，我是一个对话框</p>
      </Dialog>
    </div>
  )
}

附加特性

Next.js 包含以下附加特性以提升样式编写体验：

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

CSS 模块

CSS 模块

示例

全局样式

外部样式表

从 node_modules 导入样式

附加特性

On this page

从 `node_modules` 导入样式