CSS 样式

现在我们来讨论一下 CSS 样式。

如你所见，我们的首页 (https://:3000) 已经有一些样式了。如果你查看你的文件结构，你会看到一个名为 styles 的文件夹，里面有两个 CSS 文件：一个全局样式表 (global.css) 和一个 CSS 模块 (Home.module.css)。

如果你的项目没有这些文件，你可以在这里下载 starter 代码。

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

CSS 模块

CSS 模块通过自动创建唯一的类名，允许你在组件级别上局部限定 CSS 范围。这使你可以在不同的文件中使用相同的 CSS 类名，而不必担心类名冲突。

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

• Sass 允许你导入 .css 和 .scss 文件。
• PostCSS 库，例如 Tailwind CSS。
• CSS-in-JS 库，例如 styled-jsx、styled-components 和 emotion

在本节课中，我们将讨论如何在 Next.js 中使用 CSS 模块和 Sass。让我们开始吧！