Detaillierte Erläuterung der Verwendung von Vue+bass.scss

Dieses Mal werde ich Ihnen die Verwendung von Vue+bass.scss und die Vorsichtsmaßnahmen für die Verwendung von Vue+bass.scss ausführlich erläutern. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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.

Installation

$ > cnpm i -D sass-resources-loader

Konfiguration

Wenn konfiguriert, wird es im Loader-Parser von Vue konfiguriert, also in vue-cli Die im Gerüstmodus erstellte Datei heißt build/utils.js, und in dieser Datei ist die Methode cssLoaders() definiert. Diese Methode definiert die Analysemethoden von CSS und weniger 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>

Es wird empfohlen,

nur Variablen oder Mixins in global.scss zu definieren.

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

Empfohlene Lektüre:

So verwenden Sie das Better-Scroll-Plugin im Projekt

Eine ausführliche Erklärung von die gegenseitige Kommunikationsfunktion von Controllern in Angularjs

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Vue+bass.scss. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!