Explication détaillée des étapes pour introduire globalement bass.scss dans Vue

Cette fois, je vais vous donner une explication détaillée des étapes pour introduire globalement bass.scss dans Vue. Quelles sont les précautions pour l'introduction globale de bass.scss par Vue. Voici un cas pratique, voyons. jetez un 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 suit.

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

Quelles sont les méthodes dans Angular pour réaliser la conversion de la casse des lettres

apply et Math.max( ) Utilisation et différences

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!