CSS 样式

现在让我们来讨论 CSS 样式。

如你所见，我们的首页 (http://localhost:3000) 已经应用了一些样式。查看文件结构时，你会发现一个名为 styles 的文件夹，其中包含两个 CSS 文件：全局样式表 (global.css) 和 CSS 模块 (Home.module.css)。

如果你的项目中没有这些文件，可以通过以下命令下载初始代码：

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/assets-metadata-css-starter"

CSS 模块 (CSS Modules)

CSS 模块 通过自动生成唯一的类名，可以在组件级别实现 CSS 的局部作用域。这样你就能在不同的文件中使用相同的 CSS 类名，而不用担心类名冲突。

除了 CSS 模块外，你还可以通过多种方式为 Next.js 应用添加样式，包括：

• Sass —— 支持导入 .css 和 .scss 文件
• PostCSS 库，例如 Tailwind CSS
• CSS-in-JS 库，如 styled-jsx、styled-components 和 emotion

在本节中，我们将重点介绍如何在 Next.js 中使用 CSS 模块 和 Sass。让我们开始吧！