next.js 中文文档

主题

CSS 模块 ​

Next.js 支持不同类型的样式表，包括：

CSS 模块 ​

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

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

示例 ​

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

在生产环境中，所有 CSS 模块文件将自动合并为多个最小化和代码拆分的 .css 文件。 这些 .css 文件代表您应用程序中的热门执行路径，确保为您的应用程序加载的 CSS 最小化，以便进行绘制。

须知：

全局样式 ​

外部样式表 ​

注意：以上内容为Markdown格式的代码示例，实际使用时请根据具体项目结构和需求进行调整。

排序和合并 ​

Next.js 在生产构建中通过自动分块（合并）样式表来优化 CSS。CSS 的顺序由您将样式表导入到应用程序代码中的顺序决定。

例如，base-button.module.css 会在 page.module.css 之前排序，因为 <BaseButton> 是在 <Page> 中首先被导入的：

tsx
import styles from './base-button.module.css'

export function BaseButton() {
  return <button className={styles.primary} />
}
jsx
import styles from './base-button.module.css'

export function BaseButton() {
  return <button className={styles.primary} />
}
tsx
import { BaseButton } from './base-button'
import styles from './page.module.css'

export function Page() {
  return <BaseButton className={styles.primary} />
}
jsx
import { BaseButton } from './base-button'
import styles from './page.module.css'

export function Page() {
  return <BaseButton className={styles.primary} />
}

为了保持一个可预测的顺序，我们建议：

  • 只在单个 JS/TS 文件中导入一个 CSS 文件。
    • 如果使用全局类名，按照您希望应用的顺序在同一个文件中导入全局样式。
  • 优先使用 CSS Modules 而不是全局样式。
    • 使用一致的命名约定为您的 CSS Modules。例如，使用 <name>.module.css 而不是 <name>.tsx。
  • 将共享的样式提取到一个单独的共享组件中。
  • 如果使用 Tailwind，请在文件顶部导入样式表，最好在 根布局 中。

须知： CSS 排序在开发模式下的行为不同，始终确保检查预览部署以验证生产构建中的最终 CSS 顺序。

附加特性 ​

Next.js 包含一些附加特性，以改善添加样式的编写体验：

  • 在使用 next dev 进行本地运行时，本地样式表（无论是全局还是 CSS Modules）将利用 Fast Refresh 功能，以便在保存编辑时立即反映更改。
  • 在使用 next build 构建生产版本时，CSS 文件将被打包成较少的压缩 .css 文件，以减少检索样式所需的网络请求数量。
  • 如果禁用了 JavaScript，样式仍然会在生产构建中加载（next start）。然而，为了启用 Fast Refresh，next dev 仍然需要 JavaScript。