So installieren und integrieren Sie Sass in Vue.js

Blog

So installieren und integrieren Sie Sass in Vue.js

So installieren und integrieren Sie Sass in Vue.js

Inhalt

  1. Einführung
  2. Sass in einem Vue-Projekt von Grund auf
  3. Sass in einem bestehenden Vue-Projekt
  4. Dart Sass oder Node Sass und warum?
  5. Merken Sie sich

Hallo, Benutzer!

Wie du vielleicht schon weißt, Ruby Sass Support im März beendet , dieses Jahr ( 2019 ). Das bedeutet, dass jeder seine Versionen auf eine der beiden migrieren sollte Dart Sass oder Node Sass .

In diesem Dokument möchte ich Ihnen zeigen, wie es geht Sass in ein bereits bestehendes Vuejs-Projekt installieren und wie geht's? Sass von Grund auf in ein Vuejs-Projekt integrieren .

Sass in einem Vue-Projekt von Grund auf

Das ist der einfachere Teil, warum? Denn mit Vue-CLI 3 Sie können SASS automatisch integrieren!

anglejs mit Knoten js

Lassen Sie uns codieren.

Zuerst werden wir Installieren Sie die neueste Vue Cli-Version . Wir öffnen das Terminal in unserem Projektordner und geben

npm install -g @vue/cli

Wenn dies erledigt ist (es kann einige Zeit dauern), fangen wir an Erstellung unseres Vue-Projekts . Wir schreiben

vue create your-project-name

Jetzt haben wir den interessanten Punkt erreicht.

Wenn Sie schon einmal ein Vue-Projekt mit Vue Cli erstellt haben, wissen Sie bereits, worum es geht. Falls nicht, dann willkommen zu deinem ersten Mal.

Wir werden wählen

> Manually select features

Fahren Sie fort und wählen Sie jede Funktion aus, die Sie in Ihrem Projekt haben möchten. Stellen Sie sicher, dass Sie die Option CSS-Präprozessoren auswählen . Ich werde auch Linter wählen:

> CSS Pre-processors > Linter / Formatter

Nächster Schritt. Dies ist das Kernpunkt dieses Dokuments. Von allen Optionen, die in der Liste angezeigt werden, können Sie entweder Dart Sass oder Node Sass auswählen, ich wähle ...

> Sass/SCSS (with dart-sass)

Wählen Sie neben diesem Schritt einen Linter nach Ihrem Geschmack und die von Ihnen bevorzugten Optionen aus. Minen sind: Hübscher, beim Speichern und In dedizierten Konfigurationsdateien .

Fertig! Wenn die Installation abgeschlossen ist, gehen Sie zurück zu Ihrem Projektordner und geben Sie

npm run serve

Wenn du dich checkst App.Ansicht Code in einem Texteditor, sehen Sie, dass Ihr< Stil > tag spricht jetzt in SASS/SCSS:

ag-grid: Zeilenstil
// Your AWESOME styles go here

FANTASTISCH✨ , meinst du nicht?

Tue es, es ist Zeit, dass deine SASS-Styles glänzen !

Sass in einem bestehenden Vue-Projekt

Wenn Sie ein Projekt haben, das wurde nicht mit Vue Cli erstellt oder Sie haben einfach vergessen, die Pre-Prozessoren-Option auszuwählen , ist es besser, Node Sass+Sass Loader zu installieren. Öffnen Sie einfach Ihr Terminal im Projektordner und geben Sie ein

npm install --save-dev node-sass sass-loader

Geh jetzt zu deinem .gesehen Komponente, suche deine< Stil > tagge und sag ihm, dass er jetzt spricht SASS/SCSS beim Hinzufügen lang = scss :

// Your AWESOME styles go here

Dart Sass oder Node Sass und warum?

Was ist der Unterschied zwischen Dart oder Node Sass? Nun, hier gehen wir als Randnotiz .

Dart Sass könnte funktionieren langsamer und verbrauchen mehr Speicher (es kompiliert reines JavaScript), jedoch es funktioniert besser für Cross-Plattform als Node-Sass. Außerdem nehmen Node-Sass-Dateien zu lang um installiert zu werden , die nicht zu kleinen und einfachen Prototypen oder Projekten passt. Hier können Sie mehr darüber erfahren:

reagieren native Kartenansicht

Diskussion 1
Diskussion 2

Du musst rennen

npm run serve

um Ihre SASS-Änderungen live zu sehen. Tun nicht Vergiss dies, sonst änderst du deine Styles und siehst sie nicht auf deiner Seite!

Denken Sie daran, nachdem Sie Ihre npm laufen aufschlag Sie sehen in Ihrem Terminal wo deine App läuft örtlich , zum Beispiel localhost:8080 , nicht Ihre index.html-Seite innerhalb des Projekts.

#vue-js #sass #node-js #javascript #web-entwicklung