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 模块允许你在组件级别本地化 CSS 作用域，通过自动创建唯一的类名。这允许你在不同的文件中使用相同的 CSS 类名，而无需担心类名冲突。

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

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

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