Quelles sont les façons d'utiliser CSS dans vue pour remplacer scoped par des modules ?

Cet article présente principalement la méthode d'utilisation des modules CSS pour remplacer les recadrés dans vue. Maintenant, je le partage avec vous et vous donne une référence.

Mots précédents

Les modules CSS sont un système populaire pour modulariser et combiner CSS. vue-loader fournit une intégration avec des modules CSS comme alternative au CSS étendu. Cet article présentera en détail l'introduction des modules CSS

Lorsque j'ai commencé à utiliser Vue, j'ai préconisé et utilisé de nombreuses technologies de portée

<style scoped>
 @media (min-width: 250px) {
  .list-container:hover {
   background: orange;
  }
 }
</style>

Cet attribut de portée facultatif ajoutera automatiquement un attribut unique (tel que data-v-21e5b78) pour spécifier la portée du CSS dans le composant lors de la compilation, .list-container:hover sera compilé en quelque chose comme . list-container[data- v-21e5b78]:hover

Cependant, il n'évite pas complètement les conflits

<span data-v-0467f817 class="errShow">用户名不得为空</span>

En prenant le code ci-dessus comme exemple, après avoir utilisé scoped, il ajoute un attribut unique sur l'élément 'data-v-0467f817', le style CSS est compilé comme suit

.errShow[data-v-0467f817] {
  font-size: 12px;
  color: red;
}

Cependant, si l'utilisateur définit également un nom de classe errShow, cela affectera l'affichage de tous les composants définis as errShow class name

Les modules CSS font un travail plus approfondi, au lieu d'ajouter des attributs, ils modifient directement le nom de la classe

<span class="_3ylglHI_7ASkYw5BlOlYIv_0">用户名不得为空</span>

Cela réduit considérablement les risques de conflit, tant que le nom de la classe est errShow. l'utilisateur ne définit pas directement la balise span. Le style n'affecte fondamentalement pas l'affichage du composant

Modularité

Les modules CSS ne sont ni une norme officielle ni une fonctionnalité de le navigateur, mais sont inclus dans l'étape de construction. Un moyen de limiter la portée des sélecteurs de noms de classes CSS (implémentant une méthode de type espace de noms via le hachage). Le nom de la classe est généré dynamiquement, unique et correspond précisément au style de chaque classe dans le fichier source

En fait, les modules CSS ne sont qu'un moyen de modulariser le CSS. Pourquoi avons-nous besoin de la modularité CSS ?

Les règles CSS sont globales et les règles de style de n'importe quel composant sont valables pour la page entière. Il faut donc résoudre de toute urgence le problème du conflit de style (pollution). Généralement, afin de résoudre les conflits, le nom de la classe sera écrit plus longtemps pour réduire les risques de conflit ; un sélecteur de l'élément parent sera ajouté pour limiter la portée, etc.

La modularisation CSS est pour résoudre ce problème. Généralement, il est divisé en trois catégories

1. Catégorie de convention de dénomination

Ce type de solution modulaire CSS est principalement utilisé pour standardiser la dénomination CSS. l'un est BEM, et bien sûr OOCSS Etc., avant l'émergence des outils de construction, la plupart d'entre eux faisaient des histoires sur la dénomination CSS

2 CSS dans JS

Abandonnez complètement CSS et utilisez javascript. pour écrire des règles CSS. Les plus courantes sont les composants de style

3 Utilisez JS pour gérer les styles

Utilisez JS pour compiler des fichiers CSS natifs afin de les rendre modulaires.

Avec l'essor des outils de build, de plus en plus de personnes commencent à utiliser les deux dernières solutions lorsqu'elles écrivent du CSS, elles n'ont plus à se soucier des conflits de style. Il vous suffit d'écrire du code dans le format convenu

Écriture

Ce qui suit présente comment écrire des modules CSS

Ajoutez l'attribut de module dans le balise de style, indique l'ouverture du mode module du chargeur CSS

<style module>
.red {color: red;}</style>

Utilisez la liaison de classe dynamique : classe dans le modèle et ajoutez '$style.' devant le nom de la classe

<template>
 <p :class="$style.red">
  This should be red
 </p>
</template>

Si Si le nom de la classe contient un trait de soulignement, utilisez la syntaxe entre crochets

<h4 :class="$style[&#39;header-tit&#39;]">类别推荐</h4>

ou vous pouvez utiliser la syntaxe d'un tableau ou d'un objet

  <p :class="{ [$style.red]: isRed }">
   Am I red?
  </p>
  <p :class="[$style.red, $style.bold]">
   Red and bold
  </p>

une syntaxe d'objet plus complexe

  <ul 
　　　 :class="{
    [$style.panelBox]:true,
    [$style.transitionByPanelBox]:needTransition
   }"

Syntaxe de tableau plus complexe

  <li
   :class="[
    $style[&#39;aside-item&#39;],
    {[$style[&#39;aside-item_active&#39;]]:(i === index)}
   ]"

Configuration

La configuration par défaut de css-loader pour les modules CSS est la suivante

{
 modules: true,
 importLoaders: 1,
 localIdentName: '[hash:base64]'
}

Vous pouvez utiliser vue L'option cssModules de -loader fournit une configuration personnalisée pour css-loader

module: {
 rules: [
  {
   test: '\.vue$',
   loader: 'vue-loader',
   options: {
    cssModules: {
     localIdentName: '[path][name]---[local]---[hash:base64:5]',
     camelCase: true
    }
   }
  }
 ]
}

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

Articles connexes :

Explication détaillée de la gestion des droits utilisateur de nodejs acl

Exemple de méthode nodejs d'analyse d'une chaîne XML en objet

L'applet WeChat implémente la fonction de changement de peau

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!