Ich verwende Semantic-UI in meinem create-react-app-Projekt. Ich verwende ein benutzerdefiniertes Design, um einzelne Komponenten mithilfe von ThemeProvider zu modifizieren, was gut funktioniert. Ich versuche jedoch herauszufinden, wie man die weniger Variablen wie in der semantischen-ui-Dokumentation
ändert >Die Dokumentation react semantic-ui bietet hierzu nicht viel. Irgendwelche Ratschläge?
Mein Index.js sieht ungefähr so aus:
%Vor%Bearbeiten: Um genau zu sein, was ich erreichen möchte, möchte ich die verwendete Hauptschrift ändern.
Ich stieß auf dieses Tutorial, um ein benutzerdefiniertes Thema mit sematnic UI und CRA zu verwenden , das diesen Prozess perfekt umreißt. Es ist ein ruhiger langer Prozess, also werde ich es nur mit dem Link verlassen.
Wenn Sie über die Dokumentation schauen, könnten Sie im Grunde einen Ordner globals in Ihrer% co_de haben % Ordner, der zwei optionale Dateien enthält: theme und site.variables . Ich nehme an, Sie könnten die Variable site.overrides in @font überschreiben.
Sie können ein Beispiel für site.overrides hier .
Die kurze Antwort ... Ich glaube nicht, dass Sie das können.
Da Sie die Datei .css hier direkt importieren, verwenden Sie das kompilierte Stylesheet, so dass weniger Variablen Ihnen nicht gut tun. Ich sehe eine von zwei Möglichkeiten, um dieses Problem zu lösen.
1) Erstellen Sie Ihr eigenes weniger Stylesheet, das dann weniger Dateien dieser Bibliotheken importiert. Ich empfehle diese Option nicht, da Sie nicht bereits weniger verwenden.
2) Überschreiben Sie die Schriftart in Ihrem eigenen Stylesheet. Da Sie formatierte Komponenten verwenden, können Sie die Option injectGlobal verwenden, um dies zu erreichen.
EDIT: Sie können dafür ein semantic-ui-Paket verwenden. Ссылка
Installieren Sie das vollständige Paket für die semantische Benutzeroberfläche. Semantische Benutzeroberfläche enthält Gulp-Build Werkzeuge, damit Ihr Projekt seine eigenen Änderungen beibehalten kann um die Stilvariablen anzupassen.
Detaillierte Dokumentation zum Thema in der Semantic UI finden Sie hier.
%Vor%Nachdem Sie das Projekt mit Gulp erstellt haben, müssen Sie die Minimierte CSS-Datei in Ihrer index.js-Datei:
%Vor%
Andere Ansätze: Eine Möglichkeit besteht darin, eine Theme-Konfiguration als Teil Ihres Projekts zu verwenden und semantic-ui wahrscheinlich in einem gegabelten Git-Repo zu haben und diese Konfiguration zu verwenden, um einen benutzerdefinierten Build-Befehl auszuführen, ähnlich wie bei Ссылка .
Workflow wäre so.
Führen Sie gulp build-new (in gegabelter semantischer-ui-Repo) aus, die say-Argument für theme.config path (zeigt auf den Designpfad Ihrer reaktiven Projekte) und places in forked repo und dann gulp build theming css. Sie können die Aufgabe haben, sogar compressed css in Ihr reaktives Projekt zu ersetzen.
Sehen Sie sich das offizielle Boilerplate an. Es enthält die vorkonfigurierte Umgebung mit Webpack3 und Beispielen für Themes, die dem Themenführer folgen.
Tags und Links reactjs create-react-app semantic-ui-react