Explication détaillée de l'introduction globale par Vue de la solution bass.scss

Cet article présente principalement la solution détaillée pour l'introduction globale de bass.scss par Vue. L'éditeur pense qu'elle est plutôt bonne, je vais donc la partager avec vous maintenant et la donner comme référence. Suivons l'éditeur pour y jeter un œil

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é.

Installer

$ > cnpm i -D sass-resources-loader

Configurer

La configuration est configurée dans l'analyseur de chargeur de vue, c'est-à-dire que le fichier construit par l'échafaudage vue-cli est build/utils.js. La méthode cssLoaders() est définie dans ce fichier, qui définit des éléments tels que css, la méthode d'analyse. de moins est la suivante.

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Compréhension initiale de JavaScript, Ajax, jQuery et comparaison de la relation entre les trois

Jquery combiné avec php Implémentation d'une interrogation longue AJAX

Des exemples spécifiques à Jquery présentent quand utiliser AJAX et où AJAX doit être utilisé

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!