Ausführliche Erläuterung der globalen Einführung der bass.scss-Lösung durch Vue

In diesem Artikel wird hauptsächlich die detaillierte Lösung für die globale Einführung von bass.scss durch Vue vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen

Um das Problem der globalen Einführung von SCSS-Variablen und Mixins in Vue-Komponenten zu lösen, wird ein Parser namens „sass-resources-loader“ geladen.

Installieren

$ > cnpm i -D sass-resources-loader

Konfiguration

Konfiguration wird im Loader-Parser von vue konfiguriert, das heißt, die im vue-cli-Gerüstmodus erstellte Datei ist build/utils.js. In dieser Datei ist die Methode cssLoaders() definiert, die CSS, Less usw. definiert Die Analysemethode ist wie folgt.

// build/utils.js
exports.cssLoaders = function (options) {
 options = options || {}
 
 ...
 return {
  // ...
  sass: generateLoaders('sass', { indentedSyntax: true }),
  // 定义在这里 =======================》
  scss: generateLoaders('sass').concat(
   {
    loader: 'sass-resources-loader',
    options: {
     resources: path.resolve(__dirname, '../src/common/style/global.scss') // 需要全局引入的文件
    }
   }
  ),
  // 定义在这里 =======================》
  // ...
 }
}

// global.scss
@mixin line-height($height) {
 height: $height;
 line-height: $height;
}
$head-height: .45rem;

// xx.vue
<style lang="scss">
 height: @include line-height(45px);
</style>

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Erstes Verständnis von JavaScript, Ajax, jQuery und Vergleich der Beziehung zwischen den drei

JQuery kombiniert mit PHP Implementierung von AJAX Long Polling

JQuery-spezifische Beispiele zeigen, wann AJAX verwendet werden sollte und wo AJAX verwendet werden sollte

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der globalen Einführung der bass.scss-Lösung durch Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!