So Importieren Sie eine Sass-Datei in Jede Vue-Komponente in einer App

0
19

Wenn Sie arbeiten auf einer großen Vue Anwendung, Chancen sind an einem gewissen Punkt, Sie gehen zu wollen, organisieren die Struktur der Anwendung, so dass Sie haben einige Global definierten Variablen für CSS, dass Sie kann machen Verwendung von in einem beliebigen Teil der Anwendung.

Dies kann erreicht werden, durch das schreiben dieses Stück code in jeder Komponente in Ihrer Anwendung:

<style lang=”scss”>
@import “./styles/_variables.scss”;
</style>

Aber wer hat schon Zeit dafür?! Wir sind Programmierer, lassen Sie uns dies programmatisch tun.

Warum?

Sie Fragen sich vielleicht, warum wir das wollen würde, so etwas zu tun, vor allem, wenn Sie gerade erst in der web-Entwicklung. Globals sind schlecht, richtig? Warum müssten wir das? Was sind die Sass-Variablen? Wenn Sie bereits wissen, all dies, dann kann man unten überspringen Sie den nächsten Abschnitt für die Umsetzung.

Unternehmen, große und kleine, neigen zu Neugestaltungen mindestens alle ein bis zwei Jahre. Wenn Ihre code-Basis ist groß, verwaltete von vielen Menschen, und Sie müssen, ändern Sie die Zeile-Höhe überall von 1,1 rem zu 1.2 rem, tun Sie wirklich wollen, um zurück zu gehen, in jedes Modul und ändern Sie diesen Wert? Eine Globale variable wird außerordentlich nützlich hier. Sie entscheiden, was auf der top-Ebene und was muss geerbt werden, indem Sie andere, kleinere Stücke. Dies vermeidet spaghetti-code in CSS und hält Ihren code TROCKNEN.

Ich arbeitete einmal für ein Unternehmen, das in einer riesigen, weitläufigen codebase. Einen Tag, bevor ein major-release, Aufträge kamen von oben herab, dass wir änderten unsere primäre Marke Farbe. Da die Codebasis war gut eingerichtet, mit diese Arten von Variablen richtig definiert, ich hatte zum ändern der Farbe in einen Ort, und es vermehrt über 4000 Dateien. Das ist ziemlich mächtig. Ich habe auch nicht das ziehen ein all-nighter um die änderung zu bekommen durch in der Zeit.

Styles sind zur Gestaltung. Gutes design ist von Natur aus erfolgreich, wenn es stimmig ist. Eine Codebasis, wiederverwendet, gemeinsame Teile der Struktur können sich mehr Vereinigten, und auch die Tendenz zu professioneller Aussehen. Wenn Sie neu zu definieren, einige Basis-Teile der Anwendung in jeder Komponente ist, wird es beginnen zu brechen, wie ein Satz nicht in einem klassischen Spiel Telefon.

Globale Definitionen können selbst-Kontrolle für die Designer als auch: “Warten Sie, wir haben einen anderen Tertiär-Taste? Warum?” Leckstellen in bindigen UI/UX kündigt sich auch in diesem Modell.

Wie?

Das erste, was wir brauchen, ist zu haben, vue-cli-3 installiert. Dann erstellen wir unser Projekt:

npm install-g @vue/cli
# ODER
Garn globalen add @vue/cli

# führen Sie dann das Gerüst zu dem Projekt
vue erstellen scss-loader-Beispiel

Wenn wir diesen Befehl ausführen, werden wir sicherstellen, dass wir die Vorlage verwenden, die Sass option:

? Bitte wählen Sie ein preset: wählen Sie Manuell features
? Überprüfen Sie die Eigenschaften für Ihr Projekt benötigt werden:
◉ Babel
◯ Typoskript
◯ Progressive Web App (PWA) Unterstützung
◯ Router
◉ Vuex
“◉ CSS Pre-Prozessoren
◉ Linter / Formatter
◯ Unit-Tests
◯ E2E-Tests

Die anderen Optionen sind bis zu Ihnen, aber Sie müssen die CSS Pre-Prozessoren option geprüft. Wenn Sie eine vorhandene vue cli-3-Projekt, haben Sie keine Angst! Sie können auch ausführen:

npm i-node-sass, sass-loader
# ODER
Garn-Knoten hinzufügen-sass, sass-loader

First, let ‘ s machen einen neuen Ordner im src-Verzeichnis. Ich rief mir Stilen. Darin habe ich eine _variables.scss-Datei, wie Sie sehen würde, in der populären Projekte wie bootstrap. Für jetzt, ich habe nur eine einzige variable innerhalb es zu testen:

$primary: lila;

Jetzt erstellen wir eine Datei namens vue.config.js an der Wurzel des Projektes auf der gleichen Ebene wie Ihre package.json. In ihm, wir gehen zum definieren von Konfigurationseinstellungen. Lesen Sie mehr über diese Datei hier.

In der es, fügen wir bei, dass die import-Anweisung, die wir früher gesehen haben:

– Modul.Exporte = {
css: {
loaderOptions: {
sass: {
Daten: `@import “@/styles/_variables.scss”;`
}
}
}
};

OK, ein paar wichtige Dinge hier zu beachten:

  • Sie müssen Herunterfahren und neu starten des lokalen development-server, der alle diese änderungen zu halten.
  • @/ In der Verzeichnisstruktur vor-Stile wird Ihnen sagen, diese Konfigurationsdatei zu suchen, die innerhalb der src-Verzeichnis.
  • Sie brauchen nicht den Unterstrich im Namen der Datei, um diese zu arbeiten. Dies ist ein Sass-Namenskonvention.
  • Die Komponenten, die Sie importieren, müssen die lang=”scss” (oder sass, oder weniger, oder was auch immer Präprozessor, die Sie verwenden) – Attribut des style-Tags in die .vue eine einzige Datei Komponente. (Siehe Beispiel unten).

Nun, wir können gehen in unserer Standard-App.vue-Komponente und starten Sie mit unserer globalen variable!

<style lang=”scss”>
#app {
font-family: “Avenir”, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: Antialias;
-moz-osx-Schriftglättung: Graustufen;
text-align: center;
//dies ist, wo wir die variable benutzen
Farbe: $primary;
margin-top: 60px;
}
</style>

Hier ist ein funktionierendes Beispiel! Sie können sehen, dass der text in unserer app-lila:

Shout out an Ives, erstellt CodeSandbox, für die Einrichtung einer speziellen Konfiguration, die für uns so konnten wir sehen diese änderungen in Aktion im browser. Wenn Sie möchten, um änderungen an dieser sandbox, es gibt eine spezielle Server-Control-Panel – option in der linken sidebar, wo Sie können den server neu starten. Danke, Ives!

Und dort haben Sie es! Sie müssen nicht mehr tun, die wiederholende Aufgabe des @import-ing gleichen Variablen Datei im gesamten Vue Anwendung. Nun, wenn Sie brauchen, um überarbeiten Sie den Entwurf Ihrer Anwendung, Sie können es tun, alle in einem Ort und es wird sich ausbreiten throughoutyour app. Dies ist besonders wichtig für Anwendungen in großem Maßstab.