Explication détaillée de l'utilisation de Vue+bass.scss

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de Vue+bass.scss, et quelles sont les précautions d'utilisation de Vue+bass.scss. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Afin de résoudre le problème de l'introduction globale des variables scss et des mixins dans les composants Vue, un analyseur nommé "sass-resources-loader" est chargé.

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

ait uniquement besoin 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 :

Comment utiliser le plug-in better-scroll dans le projet

Une explication détaillée de la fonction de communication mutuelle des contrôleurs dans Angularjs

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!