Wo und wie ich eine benutzerdefinierte Klasse hinzufügen:Wie füge ich eine benutzerdefinierte Klasse zur Semantic UI hinzu?
.my-custom-class {
color: red;
}
Der Grund ist, so wird es nicht zu allen der Semantic UI-Elemente ändern.
In welcher Datei füge ich es hinzu, damit es in die dist-Datei aufgenommen wird?
Wenn Sie die Semantic-UI-Elemente nicht ändern möchten, warum haben Sie nicht einfach eine komplett separate CSS-Datei für das benutzerdefinierte Styling?
Es ist völlig in Ordnung (und recht häufig) mehr CSS-Dateien zu haben, wie zum Beispiel mit der folgenden Struktur:
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
Dann in custom.css, einfach schließt Ihr zusätzliches individuelles Styling:
.my-custom-class {
color: red;
}
Die Reihenfolge, in der die externen Stylesheets direkt geladen werden, entspricht specificity; Laden Sie Ihr benutzerdefiniertes Stylesheet nach Semantic-UI gibt es mehr Spezifität im Falle einer Krawatte.
Hoffe, das hilft! :)
Ich möchte es in der semantic.min.css-Datei zu bündeln, und haben weniger Möglichkeiten (mit Schluckuhr) ist das auch auf elegante Weise möglich? – funerr
Sie können nach Änderungen an mehreren Dateien in Gulp mit etwas wie 'watch (' css/**/*. Css ', function() {}) 'suchen und diese als Ausgabe an eine einzige Datei übergeben. Ich würde jedoch nicht empfehlen, das CSS der Semantic-UI überhaupt zu ändern; Es ist im Wesentlichen ein Plugin. Indem Sie sie getrennt halten, können Sie Ihr benutzerdefiniertes CSS vom integrierten CSS der Semantic-UI isolieren und ein potenzielles Problem leichter erkennen. Es ermöglicht auch viel einfachere "Stiländerungen", indem einfach die Reihenfolge der CSS-Dateien im HTML-Code geändert wird. –
Hallo danke, hier ist das Problem der Spezifität. SUI wird immer in Ihrer Lösung gewinnen. Hast du eine Lösung dafür? – funerr