Wie implementieren Sie ein benutzerdefiniertes Thema, indem Sie die SCSS -Variable des Elements überschreiben?

Passen Sie Ihr Element UI -Thema an: SCSS Variable Overlay -Methode

In Element UI -Projekten ist es wichtig, die Themen flexibel anzupassen. In diesem Artikel wird detailliert erläutert, wie Sie einfach personalisierte Themen erstellen können, indem die SCSS -Variablen der Element -Benutzeroberfläche überschreiben.

theme-chalk -Thema der Element UI wird basierend auf SCSS geschrieben, mit dem wir die Anpassung der Themen implementieren können, indem die Variablen geändert werden. Es ist jedoch zu beachten, dass die variablen Werte in vorkompilierten CSS -Dateien von Element UI festgelegt werden. Um variables Überschreiben zu implementieren, muss die SCSS -Quelldatei der UI -Element -UI direkt anstelle der vorkompilierten CSS -Datei eingeführt werden .

Warum können SCSS -Variablen überschrieben werden?

Weil der SCSS -Compiler den Code in der Reihenfolge verarbeitet. Die Variablen, die Sie vor dem Importieren der SCSS -Quelldatei der UI -Element -UI definieren, werden vom Compiler zuerst gelesen, wodurch die Variablen mit demselben Namen in der Quelldatei überschreiben.

Erstellen Sie beispielsweise eine Datei mit dem Namen element-variables.scss und fügen Sie den folgenden Code hinzu:

 /* Ändern Sie die Hauptfarbe des Themas*//
$-Farbprimär: #007BFF; // Wechseln Sie beispielsweise in Blue/* Sie müssen festlegen: Symbol Schriftart*/
$-Schriftart: '~ element-ui/lib/themenkalk/Schriftarten';

@import "~ element-ui/pakete/themenhalk/src/index";

In dieser Datei definieren wir zunächst die neue $--color-primary Variable und importieren dann die SCSS-Quelldatei der Element-Benutzeroberfläche. Die Reihenfolge von @import -Aussagen ist entscheidend, was sicherstellt, dass benutzerdefinierte Variablen vom Compiler vor der UI -Variablen der Elemente verarbeitet werden.

Der Unterschied zwischen @import und import

Zwei Möglichkeiten zum Import:

1. @import "~element-ui/packages/theme-chalk/src/index"; Dies ist die Import -Anweisung von SCSS, die den SCSS -Quellcode der Element -Benutzeroberfläche importiert. Variable Overlay unterstützen.
2. import 'element-ui/lib/theme-chalk/index.css'; Dies ist eine JavaScript -Importanweisung, die eine vorkompilierte CSS -Datei importiert. Variabler Überschreiber wird nicht unterstützt .

Beide schließen sich gegenseitig aus. Bei der Verwendung der SCSS -Importmethode müssen CSS -Dateien gleichzeitig nicht eingeführt werden.

Zusammenfassen

Erstellen Sie ein benutzerdefiniertes Thema, indem Sie eine benutzerdefinierte SCSS -Datei erstellen, neue Variablen definieren und die SCSS -Quelldatei der Element UI in der richtigen Reihenfolge importieren. Denken Sie daran, dass Ihre Projekteintragsdatei diese benutzerdefinierte SCSS -Datei nur einführen sollte, um Konflikte mit vorkompilierten CSS -Dateien zu vermeiden.

Das obige ist der detaillierte Inhalt vonWie implementieren Sie ein benutzerdefiniertes Thema, indem Sie die SCSS -Variable des Elements überschreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!