CSS-Styling

Lassen Sie uns nun über CSS-Styling sprechen.

Wie Sie sehen können, hat unsere Indexseite (http://localhost:3000) bereits einige Styles. Wenn Sie sich die Dateistruktur ansehen, werden Sie einen Ordner namens styles mit zwei CSS-Dateien finden: ein globales Stylesheet (global.css) und ein CSS-Modul (Home.module.css).

Falls Ihr Projekt diese Dateien nicht enthält, können Sie den Starter-Code hier herunterladen:

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

CSS-Module

CSS-Module ermöglichen es Ihnen, CSS lokal auf Komponentenebene zu begrenzen, indem automatisch eindeutige Klassennamen erstellt werden. Dadurch können Sie denselben CSS-Klassennamen in verschiedenen Dateien verwenden, ohne sich über Namenskonflikte Gedanken machen zu müssen.

Neben CSS-Modulen können Sie Ihre Next.js-Anwendung auf verschiedene Arten stylen, darunter:

• Sass, das das Importieren von .css- und .scss-Dateien ermöglicht.
• PostCSS-Bibliotheken wie Tailwind CSS.
• CSS-in-JS-Bibliotheken wie styled-jsx, styled-components und emotion.

In dieser Lektion werden wir besprechen, wie Sie CSS-Module und Sass in Next.js verwenden können. Lassen Sie uns beginnen!