跳到主要内容

CSS and Styling

Next.js 提供了几种使用 CSS 来样式化应用程序的方式，包括：

CSS Modules

CSS Modules 通过生成唯一的类名来本地化 CSS 作用域。这允许你在不同文件中使用相同的类，而不必担心命名冲突。

全局 CSS

你可以使用全局 CSS 在整个应用程序中应用样式。

外部样式表

排序和合并

Next.js 在生产构建期间通过自动分块（合并）样式表来优化 CSS。你的 CSS 顺序取决于你在代码中导入样式的顺序。

例如，base-button.module.css 将在 page.module.css 之前排序，因为 <BaseButton> 在 page.module.css 之前导入：

page.tsx
import { BaseButton } from './base-button'
import styles from './page.module.css'

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

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

建议

为了保持 CSS 排序的可预测性：

  • 尝试将 CSS 导入包含在单个 JavaScript 或 TypeScript 入口文件中
  • 在应用程序的根目录中导入全局样式和 Tailwind 样式表。
  • 对嵌套组件使用 CSS Modules 而不是全局样式。
  • 为你的 CSS 模块使用一致的命名约定。例如，使用 <name>.module.css 而不是 <name>.tsx。
  • 将共享样式提取到共享组件中以避免重复导入。
  • 关闭自动排序导入的 linter 或格式化工具，如 ESLint 的 sort-imports。
  • 你可以在 next.config.js 中使用 cssChunking 选项来控制 CSS 的分块方式。

开发与生产

  • 在开发中（next dev），CSS 更新通过快速刷新立即应用。
  • 在生产中（next build），所有 CSS 文件都会自动连接成多个压缩和代码分割的 .css 文件，确保为路由加载最少的 CSS。
  • CSS 在生产中仍然在禁用 JavaScript 的情况下加载，但在开发中需要 JavaScript 进行快速刷新。
  • CSS 排序在开发中的行为可能不同，始终确保检查构建（next build）以验证最终的 CSS 顺序。
最后于 更新