Wie schreibe ich SCSS in eine .vue-Datei?

Methode: Installieren Sie zuerst die [node-sass- und sass-loader]-Abhängigkeiten, öffnen Sie dann die Datei [webpack.base.conf.js] und fügen Sie schließlich scss-Regeln in der Regel hinzu ;] Schreiben Sie den SCSS-Stil in das Tag.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.9.6. Diese Methode ist für alle Computermarken geeignet.

Verwenden Sie scss im Vue-Projekt

1. Installieren Sie zuerst die Abhängigkeiten

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

2. Suchen Sie webpack.base.conf.js >, fügen Sie scss-Regeln in rules hinzu. build中webpack.base.conf.js,在rules中添加scss规则

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

3.在vue文件中使用

<style lang=&#39;scss&#39;>
</style>

在vue项目全局中引入scss

1.全局引用时需要安装sass-resources-loader

npm install sass-resources-loader --save-dev

2.修改build中的utils.js

scss: generateLoaders('sass')

3. Verwenden Sie

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
        //你自己的scss全局文件的路径
      resources: path.resolve(__dirname, '../src/style/common.scss')
    }
  }
)

in der Vue-Datei. Führen Sie scss global im Vue-Projekt ein

1. Sie müssen sass-resources-loader als globale Referenz installieren

rrreee

2. Ändern Sie utils.js in buildCode> Code>

Ändern Sie rrreee

in

rrreeeVerwandte Empfehlungen:

Zusammenfassung der Fragen zum Front-End-Vue-Interview 2020 (mit Antworten)

🎜Vue-Tutorial-Empfehlungen: 2020 neueste 5 vue. js-Video Tutorial-Auswahl🎜🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜🎜

Das obige ist der detaillierte Inhalt vonWie schreibe ich SCSS in eine .vue-Datei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!