Bootstrap4-Variablen überschreiben, ohne Quelle zu bearbeiten

Question

Ich habe ein paar Artikel gesehen, die darauf hindeuten, dass ich _custom.scss-Datei bearbeiten und Bootstrap neu kompilieren muss. Allerdings installiere ich bootstrap4 über npm. Daher wäre es eine sehr schlechte Übung, den Inhalt des Bootstrap in node_modules zu ändern.

Um genau zu sein, ich entwickle Angular4 App und mit Angular CLI.

Answer 1

Ja, berühren Sie nicht die Bootstrap-Dateien. Überschreibe die Variable auch nicht auf der CSS-Ebene, dies erzeugt zusätzlichen Code, und du würdest den Browser dazu bringen, zusätzliche Arbeit zu leisten.

Sie möchten die Variable auf der Sass-Ebene überschreiben, damit die Bootstrap-Variable geändert wird, wenn sie von Sass nach CSS konvertiert wird, so dass Sie nicht zwei Regeln konkurrieren und nicht an beide Lasten gebunden sind Ordnung oder Spezifität Kriege.

Der einfachste Weg, um eine Bootstrap-Variable zu überschreiben, besteht darin, eine eigene scss-Datei zu erstellen, nennen wir sie main.scss. Dann rufen Sie von hier aus Ihre benutzerdefinierte Variablen-Datei variables.scss und dann den Bootstrap-Kern auf. So könnte deine main.scss-Datei so aussehen;

@import "path-to-npm/bootstrap"; 
@import "path-to-your-repo/variables"; 

Und weil die gut Leute bei Bootstrap nicht immer Standard-Flagge auf ihren Variablen verwenden, die Reihenfolge, in der diese Dateien Angelegenheiten genannt werden. Also muss Ihre Variablen.scss zuletzt aufgerufen werden und etwas ähnliches enthalten.

@dropdown-bg: hotpink; 

Sie können dann eine Sass beobachtet Aufgabe einrichten, für Änderungen an Ihrer main.scss Datei zu beobachten und Ihre Variablen und die Bootstrap-Bibliothek zur gleichen Zeit und in einer CSS-Datei zu konvertieren.