Detaillierte Erläuterung der Konfigurationsschritte für die Verwendung von Sass in Vue

Dieses Mal werde ich Ihnen die Schritte zur Verwendung der Sass-Konfiguration in Vue ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung der Sass-Konfiguration in Vue?

1. Erstellen Sie ein neues Projekt basierend auf der Webpack-Vorlage

$ vue init webpack myvue

2. Installieren Sie im aktuellen Verzeichnis die Abhängigkeiten

$ cd myvue
$ npm install

3 sass-Abhängigkeitspaket

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

4. Fügen Sie die Konfiguration

{
 test: /\.sass$/,
 loaders: ['style', 'css', 'scss']
}

in den Regeln von webpack.base.conf.js im Build-Ordner hinzu, wie unten gezeigt:

5. Ändern Sie den Stil-Tag in APP.vue

<style lang="scss">

6. Führen Sie dann das Projekt aus

$ npm run dev

7. Ändern Sie den Stil von APP.vue und Sie können den Effekt sehen

8. Wird der Hintergrund des laufenden Ergebnisses grau, was darauf hinweist, dass Sie sass erfolgreich konfiguriert haben

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

Empfohlene Lektüre:

Nodejs-Zusammenfassung der Verarbeitungsmethoden für die Passwortverschlüsselung

Zusammenfassung der Vue-Datenübertragungsmethoden

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Konfigurationsschritte für die Verwendung von Sass in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!