现在让我们谈谈 **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 模块之外,你还可以通过多种方式为你的 Next.js 应用程序设置样式,包括
.css
和 .scss
文件。