Bootstrap 4 SCSS überschreibt nicht funktioniert

Question

Also hier ist ein Zitat aus der Dokumentation Bootstrap:

Jede Sass Variable in Bootstrap 4 enthält die Standard-Flag, bedeutet, dass Sie diesen Standardwert in Ihrem eigenen Sass außer Kraft setzen können ! auch nach wurde diese Originalvariable definiert.

Unten ist mein theme.scss Dateiinhalt:

// Bootstrap original 
@import "bootstrap/scss/bootstrap"; 

// Variables overrides 
@import "custom-variables"; 

Der Inhalt der benutzerdefinierten custom-variables.scss-Datei (nur zum Testen):

$body-color: #555; 
$font-family-base: serif; 

Alles kompiliert OK, aber ohne Änderungen zu den Stilen (z. B. die Körperfarbe und die Basisschriftfamilie bleiben die gleichen wie in den ursprünglichen Bootstrap-Dateien. Howe kommen?

Answer 1

Für v4 alpha. Die Sache ist, dass Sie die Variablen überschreiben müssen, bevor sie auf alle Boostrap-Stile angewendet werden (derzeit tun Sie es danach). In bootstrap/scss/bootstrap wird jede scss-Datei importiert, beginnend mit ihrer variables Datei. Gleich danach bieten sie eine Art Haken für Sie, um die Variablen zu überschreiben, bevor sie für Tabellen, Schaltflächen usw. verwendet werden.

Bootstrap 4 wird mit einer Datei _custom.scss geliefert, um die Standardvariablen in /scss/_variables.scss einfach überschreiben zu können. Kopieren Sie relevante Zeilen von dort in die _custom.scss-Datei, ändern Sie die Werte und kompilieren Sie Ihren Sass erneut, um unsere Standardwerte zu ändern. Stellen Sie sicher, dass das Standard-Flag von den Überschreibungswerten entfernt wird. [Source]

Die _custom.scss Datei sollte innerhalb Ihres bootstrap/scss/ Verzeichnis befinden.
Hinweis: Dies ist seit v4 Beta veraltet.

---

Für v4 Beta und höher.Variable defaults funktionieren im Grunde umgekehrt. Eine Variable mit !default Flag wird standardmäßig auf den zuvor festgelegten Wert dieser Variablen gesetzt (falls verfügbar). Da alle Bootstrap-Variablen dieses Flag haben, könnten Sie Ihre custom-variables.scss vor der bootstrap/scss/bootstrap importieren;

$var: 2px; /* set in custom-variables.scss */ 
$var: 1px !default; /* set in the bootstrap _variables.scss */ 

.element { 
    width: $var; 
} 

kompiliert

.element { 
    width: 2px; 
} 

---

Ein Weg Bootstrap-Variablen zu verwenden, wenn überschreiben sie zweimal die _variables.scss-Datei zu importieren ist; einmal als eine einzige Datei, bevor Sie Ihre Überschreibungen und einmal nach dem im Rahmen des gesamten Bootstrap definieren:

// @import bootstrap _variables.scss file 
$var: 1px !default; 
$var2: 4px !default; 

// your custom-variables.scss 
$var: 2px + $var2; 

// @import bootstrap 
$var: 1px !default; 
$var2: 4px !default; 

.element { 
    width: $var; 
} 

kompiliert

.element { 
    width: 6px; 
}