Detaillierte grafische Erklärung zum Öffnen von vue-cli und sass

Dieser Artikel führt Sie hauptsächlich in Form von Bildern und Texten in die richtige Art und Weise ein, Vue-Cli + Sass zu öffnen. Er ist sehr gut und hat Referenzwert alle.

Bezüglich der Konfiguration von Sass in einem mit vue-cli erstellten Projekt lauten die Antworten im Internet im Wesentlichen wie folgt:

Aber 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 dann die kompilierten CSS-Dateien direkt in main.js einzuführen. Wie iView verfolgen auch ElementUI diesen Ansatz.

Wenn Sie diesem Ansatz zustimmen und planen, ihn zu übernehmen, schauen Sie sich das folgende konkrete Beispiel an:

Die Projektstruktur ist wie oben unten dargestellt der Style-Ordner Es handelt sich um eine klassifizierte SCSS-Datei, um die Verwaltung und spätere Wartung zu erleichtern. Fügen Sie dann alle Fragmente im SCSS-Stil in main.scss ein und verwenden Sie den Befehl sass --watch main.scss:main.css, um die SCSS-Datei abzuhören und in eine CSS-Datei zu kompilieren. 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:

Dadurch wird jedoch nicht der Effekt erzielt, da jedes Mal nur der vorherige Befehl gestartet wird. Deshalb habe ich darüber nachgedacht, die Stapelverarbeitung zu verwenden, um es zu implementieren:

Legen Sie diese beiden .bat-Dateien in das 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.

Verwandte Empfehlungen:

Detaillierte Erläuterung der CSS-Präprozessor-Sass-Beispiele

So lösen Sie das chinesische Fehlerproblem von Webstrom-Sass-Kommentaren

Zusammenfassung des Lernens über SASS