So importieren Sie eine Sass-Datei in jede Vue-Komponente einer App

Wenn Sie an einer großen Vue-Anwendung arbeiten, möchten Sie wahrscheinlich irgendwann die Struktur Ihrer Anwendung so organisieren, dass Sie global definierte Variablen für CSS haben, die Sie in jedem Teil Ihrer Anwendung verwenden können.

Dies kann erreicht werden, indem dieser Code in jede Komponente Ihrer Anwendung geschrieben wird.

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

Aber wer hat dafür Zeit?! Wir sind Programmierer, machen wir das programmatisch.

Warum?

Sie fragen sich vielleicht, warum wir so etwas tun sollten, besonders wenn Sie gerade erst mit der Webentwicklung anfangen. Globale Variablen sind schlecht, oder? Warum brauchen wir das? Was sind Sass-Variablen überhaupt? Wenn Sie all das bereits wissen, können Sie zum nächsten Abschnitt springen, um die Implementierung zu erfahren.

Unternehmen, ob groß oder klein, führen mindestens alle ein bis zwei Jahre Redesigns durch. Wenn Ihre Codebasis groß ist, von vielen Leuten verwaltet wird und Sie die Zeilenhöhe überall von 1,1rem auf 1,2rem ändern müssen, wollen Sie dann wirklich in jedes Modul zurückgehen und diesen Wert ändern? Eine globale Variable ist hier außerordentlich nützlich. Sie entscheiden, was auf der obersten Ebene liegen kann und was von anderen, kleineren Teilen geerbt werden muss. Dies vermeidet Spaghetti-Code in CSS und hält Ihren Code DRY.

Ich habe einmal für ein Unternehmen gearbeitet, das eine gigantische, weitläufige Codebasis hatte. Einen Tag vor einem großen Release kam die Anweisung von oben, dass wir unsere primäre Markenfarbe ändern würden. Da die Codebasis mit diesen Arten von Variablen gut eingerichtet war, musste ich die Farbe nur an einer Stelle ändern, und sie verbreitete sich über 4.000 Dateien. Das ist ziemlich mächtig. Außerdem musste ich keine Nachtschicht einlegen, um die Änderung rechtzeitig durchzubringen.

Bei Styles geht es um Design. Gutes Design ist naturgemäß erfolgreich, wenn es kohärent ist. Eine Codebasis, die gemeinsame Strukturelemente wiederverwendet, kann einheitlicher und professioneller wirken. Wenn Sie Basisbestandteile Ihrer Anwendung in jeder Komponente neu definieren müssen, beginnt sie zusammenzubrechen, genau wie ein Satz in einem klassischen Spiel "Stille Post".

Globale Definitionen können auch für Designer selbstreferenziell sein: "Moment, wir haben noch einen tertiären Button? Warum?" Lecks in kohäsiven UI/UX kündigen sich in diesem Modell gut an.

Wie?

Als Erstes benötigen wir vue-cli 3 installiert. Dann erstellen wir unser Projekt.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

# then run this to scaffold the project
vue create scss-loader-example

Wenn wir diesen Befehl ausführen, stellen wir sicher, dass wir die Vorlage mit der Sass-Option verwenden.

? Please pick a preset: Manually select features
? Check the features needed for your project:
  ◉ Babel
  ◯ TypeScript
  ◯ Progressive Web App (PWA) Support
  ◯ Router
  ◉ Vuex
❯ ◉ CSS Pre-processors
  ◉ Linter / Formatter
  ◯ Unit Testing
  ◯ E2E Testing

Die anderen Optionen sind Ihnen überlassen, aber Sie müssen die Option CSS Pre-processors ausgewählt haben. Wenn Sie bereits ein Vue CLI 3-Projekt haben, keine Sorge! Sie können auch ausführen:

npm i node-sass sass-loader
# OR
yarn add node-sass sass-loader

Zuerst erstellen wir einen neuen Ordner im src-Verzeichnis. Ich nannte meinen styles. Darin habe ich eine Datei _variables.scss erstellt, wie man sie in beliebten Projekten wie Bootstrap sieht. Vorerst habe ich nur eine Variable hineingeschrieben, um sie zu testen.

$primary: purple;

Erstellen Sie nun eine Datei namens vue.config.js im Stammverzeichnis des Projekts, auf derselben Ebene wie Ihre package.json. Darin definieren wir einige Konfigurationseinstellungen. Sie können mehr über diese Datei hier erfahren.

Darin fügen wir die Importanweisung ein, die wir bereits gesehen haben.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/_variables.scss";`
      }
    }
  }
};

Leser Dan Danciu merkt an, dass ab sass-loader 8 data durch prependData oben ersetzt werden muss.

Leser Esteban Jelicich merkt an, dass ab sass-loader 9 data durch additionalData oben ersetzt werden muss.

Okay, ein paar wichtige Dinge, die hier zu beachten sind:

• Sie müssen Ihren lokalen Entwicklungsserver herunterfahren und neu starten, damit diese Änderungen wirksam werden.
• Das @/ in der Verzeichnisstruktur vor styles weist diese Konfigurationsdatei an, im Verzeichnis src zu suchen.
• Sie benötigen den Unterstrich im Dateinamen nicht, damit dies funktioniert. Dies ist eine Sass-Namenskonvention.
• Die Komponenten, in die Sie importieren, benötigen das Attribut lang="scss" (oder sass, oder less, oder welchen Präprozessor Sie auch immer verwenden) im Style-Tag der .vue Single-File-Komponente. (Siehe Beispiel unten.)

Jetzt können wir in unsere Standard-App.vue-Komponente gehen und unsere globale Variable verwenden!

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  //this is where we use the variable
  color: $primary;
  margin-top: 60px;
}
</style>

Hier ist ein funktionierendes Beispiel! Sie können sehen, wie der Text in unserer App lila wird.

Ein Dankeschön an Ives, der CodeSandbox erstellt hat, für die spezielle Konfiguration, damit wir diese Änderungen im Browser sehen konnten. Wenn Sie Änderungen an dieser Sandbox vornehmen möchten, gibt es in der linken Seitenleiste eine spezielle Option Server Control Panel, über die Sie den Server neu starten können. Danke, Ives!

Und da haben Sie es! Sie müssen nicht mehr die repetitive Aufgabe des @import-ens der gleichen Variablen-Datei in Ihrer gesamten Vue-Anwendung durchführen. Wenn Sie nun das Design Ihrer Anwendung refaktorieren müssen, können Sie dies an einem Ort tun, und es wird sich in Ihrer gesamten App verbreiten. Dies ist besonders wichtig für Anwendungen in großem Maßstab.