Heim  >  Artikel  >  Web-Frontend  >  Konfigurieren Sie Sass in Vue

Konfigurieren Sie Sass in Vue

php中世界最好的语言
php中世界最好的语言Original
2018-06-15 11:22:191276Durchsuche

Dieses Mal werde ich Ihnen die Konfiguration von Sass in Vue vorstellen. Was sind die Vorsichtsmaßnahmen für die Konfiguration von Sass in Vue? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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. Installieren Sie das 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

<style lang="scss">

in APP.vue 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

Ich glaube, Sie haben es gemeistert Die Methode nach dem Lesen des Falles in diesem Artikel finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So verwenden Sie die statische PHP-Bindung im Projekt

Dynamische Übergabe von Abfrageparametern in vue- Router Wie man mit

umgeht

Das obige ist der detaillierte Inhalt vonKonfigurieren Sie Sass in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn