Bootstrap 4 Variablen mit eigenen Variablen anpassen?

Question

Ich benutze neueste Bootstrap 4 Beta 2. Ich versuche, es anzupassen. Meine Veränderungsvariablen mit meinen eigenen.

ich meine eigene styles.scss mit allen Bootstrap-Importe haben:

// My variables 
@import 'helpers/variables'; 

// Bootstrap files 
@import 'node_modules/bootstrap/scss/functions'; 
@import 'node_modules/bootstrap/scss/variables'; 
@import 'node_modules/bootstrap/scss/mixins'; 
@import 'node_modules/bootstrap/scss/root'; 
@import 'node_modules/bootstrap/scss/print'; 
@import 'node_modules/bootstrap/scss/reboot'; 
// ... all others 

Offizielle Dokumentation bietet eine example, wie Bootstrap kann (Themen) angepasst werden. Aber es gibt nur ein einfaches Beispiel mit HEX-Farben.

Aber was, wenn ich Variablen im Bootstrap _variables.scss überschreiben und Variablen aus dieser Datei gleichzeitig verwenden möchte? Zum Beispiel möchte ich meine $primary schwarz machen. Sie haben diese Variable bereits innerhalb _variables.scss, aber ich habe keine Idee gefunden, wie man es benutzt. Ich habe so versucht:

// source: helpers/variables 
@import 'node_modules/bootstrap/scss/functions'; 
@import 'node_modules/bootstrap/scss/variables'; 

$primary: $indigo; 

Aber in diesem Fall wird blaue Farbe verwendet. Wenn ich diese Importe von helpers/variables entfernen und Farbe mit HEX ersetzen - alles funktioniert gut.

Ich denke, dass es keine Möglichkeit gibt, dies zu tun, weil SASS dies nicht zulassen wird, aber entschieden hat, die Community zu fragen.

Answer 1

Erstellen Sie einfach Ihre eigene Variablen.scss-Datei und legen Sie sie so fest, dass sie zuerst in Ihrer style.scss geladen wird und die Standard-Bootstrap-Variablen überschrieben werden.

Kopieren Sie dann einige Variablen aus Bootstrap _variables.scss, die Sie in Ihre Variablen.scss ändern und anpassen möchten. Beachten Sie, dass Sie Standardmarken in Ihrer Variablen.scss entfernen sollten.