Welche Möglichkeiten gibt es, CSS in Vue zu verwenden, um Gültigkeitsbereiche durch Module zu ersetzen?

In diesem Artikel wird hauptsächlich die Methode zur Verwendung von CSS-Modulen zum Ersetzen von Zuschnitten in Vue vorgestellt. Jetzt teile ich es mit Ihnen und gebe Ihnen eine Referenz.

Vorherige Wörter

CSS-Module sind ein beliebtes System zur Modularisierung und Kombination von CSS. vue-loader bietet die Integration mit CSS-Modulen als Alternative zu bereichsbezogenem CSS. In diesem Artikel wird die Einführung von CSS-Modulen ausführlich vorgestellt

Als ich zum ersten Mal mit der Verwendung von Vue begann, habe ich eine Menge Scoped-Technologie befürwortet und verwendet

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

Das optionale Bereichsattribut fügt automatisch ein eindeutiges Attribut (z. B. data-v-21e5b78) hinzu, um den Bereich für das CSS innerhalb der Komponente anzugeben. Beim Kompilieren wird .list-container:hover in etwas wie .list- kompiliert. container[data-v- 21e5b78]:hover

Konflikte werden jedoch nicht vollständig vermieden

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

Nehmen wir den obigen Code als Beispiel und fügen nach der Verwendung von „scoped“ ein eindeutiges Attribut „data“ hinzu -v' für das Element -0467f817' wird der CSS-Stil wie folgt kompiliert

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

Wenn der Benutzer jedoch auch einen errShow-Klassennamen definiert, wirkt sich dies auf die Anzeige aller als errShow-Klassenname definierten Komponenten aus

Und CSS-Module Es erledigt dies gründlicher, anstatt den Klassennamen direkt zu ändern.

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

Dadurch wird die Möglichkeit von Konflikten erheblich reduziert Der Stil für das Span-Tag hat grundsätzlich keinen Einfluss auf die Komponente. Die Anzeige von

Modularität

CSS-Modulen ist weder ein offizieller Standard noch eine Browserfunktion, aber eine Einschränkung des CSS-Klassennamenselektors während des Erstellungsschritts. Eine Art der Domäne (Implementierung einer Namespace-ähnlichen Methode durch Hash). Der Klassenname wird dynamisch generiert, ist eindeutig und entspricht genau dem Stil jeder Klasse in der Quelldatei

Tatsächlich sind CSS-Module nur eine Möglichkeit, CSS zu modularisieren. Warum brauchen wir CSS-Modularität?

CSS-Regeln gelten global und die Stilregeln jeder Komponente gelten für die gesamte Seite. Daher muss dringend das Problem des Stilkonflikts (Umweltverschmutzung) gelöst werden. Um Konflikte zu lösen, wird im Allgemeinen der Klassenname länger geschrieben, um die Wahrscheinlichkeit eines Konflikts zu verringern. Es wird ein Selektor des übergeordneten Elements hinzugefügt, um den Umfang usw. einzuschränken.

CSS-Modularisierung ist Um dieses Problem zu lösen, ist es in drei Kategorien unterteilt:

1. Kategorie der Namenskonvention

Diese Art der modularen CSS-Lösung wird hauptsächlich zur Standardisierung der CSS-Benennung verwendet Eine davon ist BEM und natürlich OOCSS usw. Vor dem Aufkommen der Erstellungstools machten die meisten von ihnen viel Aufhebens um die CSS-Benennung

2 CSS in JS

Css vollständig aufgeben und Javascript verwenden um CSS-Regeln zu schreiben. Die häufigsten sind Stilkomponenten.

3. Verwenden Sie JS, um native CSS-Dateien zu kompilieren, um sie modular zu gestalten

Mit dem Aufkommen von Build-Tools beginnen immer mehr Menschen, die beiden letztgenannten Lösungen zu verwenden. Beim Schreiben von CSS müssen sie sich keine Sorgen mehr über Stilkonflikte machen. Sie müssen nur Code im vereinbarten Format schreiben

Schreiben

Im Folgenden wird erläutert, wie Sie CSS-Module schreiben

Fügen Sie das Modulattribut in hinzu style-Tag, Zeigt das Öffnen des Modulmodus des CSS-Loaders an

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

Verwenden Sie die dynamische Klassenbindung:class in der Vorlage und fügen Sie „$style“ vor dem Klassennamen hinzu

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

Wenn Der Klassenname enthält Unterstreichung, verwenden Sie die Syntax in eckigen Klammern

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

Sie können auch Array- oder Objektsyntax verwenden

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

Komplexere Objektsyntax

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

Komplexere Array-Syntax

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

Konfiguration

Die Standardkonfiguration des CSS-Loaders für CSS-Module ist wie folgt

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

Sie können die Option cssModules des Vue-Loaders verwenden, um die anzupassen Konfiguration für CSS-Loader

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung der Benutzerrechteverwaltung von NodeJS ACL

Beispiel für die NodeJS-Methode zum Parsen von XML-Strings in Objekte

WeChat-Applet implementiert Skin-Change-Funktion

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, CSS in Vue zu verwenden, um Gültigkeitsbereiche durch Module zu ersetzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!