In dieser Anleitung wird das vollständige Verfahren zum Einrichten eines schnellen Node.js SASS/SCSS-Projekts veranschaulicht.
Wie richte ich ein schnelles Node.js Sass/SCSS-Projekt ein?
SASS verwendet reine CSS-Eigenschaften, um das ausgewählte Element zu formatieren. Es stärkt das ursprüngliche CSS durch die Einbeziehung der Mathematik- und Variablenfunktionen. Es wendet Stilisierungen auf das DOM in einer Hierarchie an. Durch die Integration von SASS mit Node.js kann der Entwickler das Projekt sehr einfach gestalten, um es auffälliger und pixelgenauer zu gestalten.
Befolgen wir die folgenden Schritte, um ein Node.js-Projekt entlang des SASS/SCSS einzurichten.
Schritt 1: „SASS“ installieren
Installieren Sie zunächst „ SASS „Global im Node.js-Projekt mit dem Node-Paketmanager“ npm ” durch diesen Befehl:
npm install -g sass
Die Ausgabe zeigt, dass „ saas „Paket wurde installiert:
Schritt 2: Verzeichnisse erstellen
Erstellen Sie als Nächstes separate Verzeichnisse für CSS- und SCSS-Dateien mit dem folgenden „mkdir“-Befehl:
mkdir cssFiles
mkdir scssFiles
Es ist ersichtlich, dass das obige „ mkdir Der Befehl „ hat den Befehl „ erstellt. CSS-Dateien ' Und ' scssFiles ” Verzeichnisse:
Schritt 3: Verknüpfen Sie das SASS-Modul
Benutzen Sie nun die „ Sass ”-Modul, um auf Änderungen in den vorhandenen Dateien des „ zu achten scssFiles ' Verzeichnis. Im Falle einer Änderung werden automatisch CSS-Dateien innerhalb der verknüpften „ CSS-Dateien ”-Verzeichnis und fügen Sie die gleichen SCSS-Daten in die CSS-Datei ein.
Der auszuführende Befehl zum Beobachten und Verknüpfen der „ Sass Das Modul lautet wie folgt:
Sass --betrachten scssFiles : CSS-DateienJetzt sucht saas nach allen möglichen Änderungen im scssFiles-Verzeichnis.
Notiz: Der obige Befehl sollte in der System-Eingabeaufforderung ausgeführt werden, da er auf Tools-Terminals wie Visual Studio-Code nicht funktioniert.
Schritt 4: Erstellung von SCSS und entsprechenden CSS-Dateien
In diesem Schritt wird eine leere Datei mit dem Namen „ scssStyle ' mit ' scss Die Erweiterung „wird innerhalb der Datei „“ erstellt. scssFiles ' Verzeichnis:
Danach zwei Dateien mit dem Namen „ scssStyle.css ' Und ' scssStyle.css.map ” werden automatisch erstellt durch das „ Sass ” Modul innerhalb des „ CSS-Dateien ”-Verzeichnis, wie unten gezeigt:
Schritt 5: Code einfügen
Geben Sie abschließend einen SCSS-Code in das Feld „ ein. scssStyle.scss ' Wie nachfolgend dargestellt:
Jetzt wird derselbe Code im CSS-Format automatisch in das „ scssStyle.css ' Datei:
Lassen Sie uns die Schritte 4 und 5 mithilfe von GIF visuell veranschaulichen:
In diesem Leitfaden wurden die Schritte zum Erstellen des Node.js-SASS\SCSS-Projekts erläutert.
Abschluss
Um ein schnelles Node.js SASS/SCSS-Projekt einzurichten, installieren Sie zunächst das Modul „ Sass ”-Modul und erstellen Sie dann zwei Verzeichnisse, eines für „ SASS\SCSS ”-Datei und eine weitere für „ CSS ”Dateien. Machen Sie danach „ Sass ”-Modul, um alle Änderungen in neu erstellten Verzeichnissen über das „ sass –sass:css ansehen ' Befehl. Als Ergebnis dieser Aktion werden die Datei „SASS\SCSS“ und zwei „CSS“-Dateien automatisch im Ordner „CSS“ generiert. Wenn der Benutzer die „SASS\SCSS“-Dateien ändert, werden die neuen Änderungen automatisch in die CSS-Dateien eingefügt. In diesem Handbuch wurde das vollständige Verfahren zum Einrichten des Node.js SASS\SCSS-Projekts erläutert.