Next.js 通过 [name].module.css 文件命名约定来支持 CSS 模块

CSS 模块通过自动创建唯一的类名从而将 CSS 限定在局部范围内。 这使您可以在不同文件中使用相同的 CSS 类名,而不必担心冲突。

此行为使 CSS 模块成为包含组件级 CSS 的理想方法。 CSS 模块文件 可以导入(import)到应用程序中的任何位置

例如,假设 components/ 目录下有一个可重用 Button 组件:

首先,创建 components/Button.module.css 文件并填入以下内容:

1
2
3
4
5
6
7
8
/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
  color: white;
  background-color: red;
}

然后,创建 components/Button.js 文件,导入(import)并使用上述 CSS 文件:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

CSS 模块是一项 可选功能仅对带有 .module.css 扩展名的文件启用。 普通的 <link> 样式表和全部 CSS 文件仍然是被支持的。

在生产环境中,所有 CSS 模块文件将被自动合并为 多个经过精简和代码分割的 .css 文件。 这些 .css 文件代表应用程序中的热执行路径(hot execution paths),从而确保为应用程序绘制页面加载所需的最少的 CSS。