Detaillierte Erklärung der Verwendung von vue-cli+sass

Dieses Mal werde ich Ihnen die Verwendung von vue-cli+sass und die Vorsichtsmaßnahmen für die Verwendung von vue-cli+sass ausführlich erläutern. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Ich halte es für sehr unklug, den Stil direkt in den zu schreiben. Ganz zu schweigen von den verschiedenen Fallstricken im Node-Sass-Installationsprozess, der eingebettete macht die Komponenten auch sehr verwirrend. Stellen Sie sich vor, Sie müssen das Scrollrad durch Dutzende oder Hunderte Zeilen CSS-Code ziehen, wenn Sie eine bestimmte Methode ändern, oder Sie möchten eine Reihe von Stilen ändern, können aber die entsprechenden CSS-Dateien nicht finden, weil sie in der Vue-Datei verstreut sind . . .

Meiner Meinung nach sollte der richtige Ansatz darin bestehen, die Sass-Dateien separat zu verwalten und die kompilierten CSS-Dateien dann direkt in main.js einzuführen. Wie iView verfolgen auch ElementUI diesen Ansatz.

Unter dem Style-Ordner befinden sich klassifizierte SCSS-Dateien, um die Verwaltung und spätere Wartung zu erleichtern. Führen Sie dann alle Fragmente im SCSS-Stil in main.scss ein und verwenden Sie sie sass --watch main.scss:main.css Der Befehl lauscht und kompiliert SCSS-Dateien in CSS-Dateien. Führen Sie abschließend die Datei main.css in main.js ein. Auf diese Weise können Sie Klassen direkt zu Elementen hinzufügen und dann Stile in scss schreiben.

Natürlich möchten wir diese Befehle nicht jedes Mal manuell eingeben. Die ursprüngliche Idee besteht darin, den Dev-Befehl

zu ändern, aber dies wird nicht den Effekt erzielen, da jeweils nur der vorherige Befehl gestartet wird Zeit. Deshalb habe ich darüber nachgedacht, die Stapelverarbeitung zu verwenden, um es zu implementieren:

Platzieren Sie diese beiden .bat-Dateien im Stammverzeichnis und konfigurieren Sie dann package.json:

Auf diese Weise können Sie mit npm run dev Hot Reload und Sass Watch mit einem Klick starten.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So erstellen Sie eine Countdown-Funktion mit dem Datumsobjekt

Detaillierte Erläuterung der dynamischen Verwendung von v -Modell in Vue