Vue présente globalement les étapes de mise en œuvre de bass.scss

Cette fois, je vais vous présenter les étapes pour mettre en œuvre l'introduction globale de bass.scss dans Vue. Quelles sont les précautions pour l'introduction globale de bass.scss dans Vue. , jetons un coup d'oeil.

Installation

$ > cnpm i -D sass-resources-loader

Configuration

S'il est configuré, il est configuré dans l'analyseur du chargeur de vue, c'est-à-dire , en vue Le fichier construit à l'aide de la méthode d'échafaudage -cli est build/utils.js La méthode cssLoaders() est définie dans ce fichier. Cette méthode définit les méthodes d'analyse de CSS et moins, comme détaillé ci-dessous.

// 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>

Il est recommandé que

n'ait besoin que de définir des variables ou des mixins dans global.scss.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

L'applet WeChat partage la page et revient à la page d'accueil

ElTableColumn ajoute une fonction de résumé de recherche

Explication détaillée de l'utilisation de Vue Watch

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!