Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-05-28 17:30:37
original
1919 Les gens l'ont consulté

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
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal