Aus dem Kurs: React Grundkurs

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 24.700 Kurse von Branchenfachleuten.

SASS & CSS Modules

SASS & CSS Modules – Tutorial zu React.js

Aus dem Kurs: React Grundkurs

Gratismonat starten Für Ihr Team erwerben

SASS & CSS Modules

“

In dieser Lektion wollen wir unsere Seite mithilfe von SASS und CSS Modules weiter aufhübschen. Um SASS in unserem Projekt zu aktivieren, installieren wir es mit "npm install". Danach starten wir wieder unseren Development Server. Die Verwendung von SASS ist nun denkbar einfach. Zuerst nennen wir unsere global.css in global.scss um. Dann beschwert sich der Compiler zurecht, denn wir müssen es auch noch in unserer App-Komponente umbenennen. Ist das getan, können wir in unserer global.scss das Nesting verwenden. Wir wollen dabei auch gleich die Styles für die Navigation aus den Inline Styles herausnehmen. Auch die Hero-Component soll etwas Padding bekommen. Von der App Component aus sehen wir aber das Markup nicht, wir müssen also in die Hero Component wechseln. Wir könnten nun mit className eine Klasse verwenden und diese dann in unserer globalen SCSS-Datei definieren. Es gibt jedoch eine bessere Methode. Wir legen eine neue Styles-Datei an, mit dem Namen, Achtung, Hero.module.scss…

Inhalt