Detaillierte Erklärung zum Ändern des Standardstils der externen Komponente Vant basierend auf der Vue-CLI-Entwicklung

Vorwort

Wenn Sie externe Komponenten einführen und den Standardstil ändern möchten, können Sie ihn über die Klasse ändern. Dies kann jedoch normalerweise verschiedene Gründe haben, z. B. unzureichendes Gewicht. Auf der offiziellen Website sind tatsächlich eine Reihe von Lösungen zur Designanpassung aufgeführt, mit denen Sie den Stil durch Überschreiben der Konfigurationsdatei ändern können. Die offizielle Website-Adresse lautet: Designanpassung

Tipp: Das Folgende ist der Hauptinhalt dieses Artikels. Die folgenden Fälle können als Referenz verwendet werden

1. Weniger

Da Vant Less zur Vorverarbeitung der Stile verwendet und über einige integrierte Stilvariablen verfügt, können Sie das gewünschte Design durch Ersetzen der Stilvariablen anpassen.

Konfigurieren Sie weniger für Ihr Projekt:

npm installiere weniger --save-dev
npm installiere less-loader --save-dev

Probieren Sie nach der Konfiguration aus, ob weniger verwendet werden kann. Wenn ein Fehler gemeldet wird, liegt dies normalerweise an einer höheren Version.
Sie können versuchen, die Version herunterzustufen

"less-loader": "^5.0.0",

2. Importieren Sie Ihre Komponenten

Als Beispiel stelle ich hier die Tab-Tab-Komponente vor

<van-tabs v-model="aktiv">
 <van-tab title="Tag 1">Inhalt 1</van-tab>
 <van-tab title="Tag 2">Inhalt 2</van-tab>
 <van-tab title="Tag 3">Inhalt 3</van-tab>
 <van-tab title="Tag 4">Inhalt 4</van-tab>
</van-tabs>

Standard exportieren {
 Daten() {
 zurückkehren {
  aktiv: 2,
 };
 },
};

Es verfügt über Standardstile, wie z. B. aktive Schriftfarbe, untere Statusfarbe usw.

3. Ändern Sie die Konfigurationsdatei

Schritt 1: Direkter Import der Less-Datei

In main.js importieren:

importiere „vant/lib/index.less“;

Schritt 2: Stilvariablen ändern

Suchen Sie nach Ihrer Datei vue.config.js. Wenn sie nicht existiert, erstellen Sie eine neue Konfigurationsdatei auf derselben Ebene wie package.json und fügen Sie den folgenden Code hinzu:

modul.exporte = {
 css: {
 loaderOptions: {
  weniger: {
  // Wenn die Less-Loader-Version niedriger als 6.0 ist, entfernen Sie bitte die LessOptions-Ebene und konfigurieren Sie die Optionen direkt.
  wenigerOptionen: {
   Variablen ändern: {
   // Direkt die Variable 'text-color' überschreiben: '#111',
   'Rahmenfarbe': '#eee',
   // Oder Sie können es durch eine Less-Datei überschreiben (der Dateipfad ist ein absoluter Pfad)
   hack: `true; @import "Ihr-weniger-Dateipfad.weniger";`,
   },
  },
  },
 },
 },
};

Sie können die Variablen direkt ändern oder die Liste in eine Less-Datei auflisten und importieren. Beachten Sie, dass Sie den Kommentaren im Code folgen müssen, wenn die Less-Version niedriger ist.
Gehen Sie zurück zum Verwendungsdokument der vorherigen Etikettenkomponente und scrollen Sie nach unten, um den Abschnitt mit den Stilvariablen zu finden.

Es definiert einige Stile für Komponenten. Sie können die Stile ändern, die Sie ändern müssen, indem Sie sich ihre Namen ansehen. Beispielsweise sollte die Variable @tab-active-text-color die Farbe der Schriftart im aktiven Zustand darstellen. Jetzt muss ich sie in die gewünschte Farbe ändern, also ändere ich sie in der Konfigurationsdatei.

Starten Sie den Server erneut und Sie können sehen, dass sich der Stil der Komponente geändert hat.

Zusammenfassen

Dies ist das Ende dieses Artikels zum Ändern des Standardstils der externen Komponente Vant basierend auf der Vue-CLI-Entwicklung. Weitere relevante Inhalte zum Standardstil von Vuecli Vant finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!