跳至内容

资源、元数据和 CSS

CSS 样式

现在让我们谈谈 **CSS 样式**。

如你所见,我们的首页 (https://127.0.0.1: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 应用程序设置样式,包括

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