Wie Bootstrap 4 mit angular-cli anzupassen

Question

Ich habe eine Angular 4-Anwendung mit angular-cli 1.0 und Bootstrap 4-alpha6. Ich möchte Bootstrap 4 anpassen. Ändern Sie die Farbe der Primärtasten.

Es muss eine zukunftssichere Lösung sein. Das bedeutet, dass meine Anpassungen die Upgrades des Bootstrap zu einem späteren Zeitpunkt überleben müssen.

Ich habe Bootstrap integriert von: Hinzufügen von "bootstrap": "4.0.0-alpha.6", zu den Abhängigkeiten in meiner package.json Datei. Weiterhin hinzugefügt I

"styles": [ 
     "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
     ], 

zu "apps" in Winkel cli.json.

Mein erster Versuch war es, eine neue Datei namens style.scss zu erstellen, sie in src/assets einzufügen und auch in angle-cli.json zu referenzieren.

Der Inhalt könnte wie folgt aussehen:

@import "../../node_modules/bootstrap/scss/variables"; 
@import "../../node_modules/bootstrap/scss/mixins"; 

$body-bg: $gray-dark; 
$body-color: $gray-light; 

Wenn ng serve läuft die Anwendung comiles in Ordnung, aber ich sehe keine Änderungen.

Habe ich überhaupt in die richtige Richtung gestartet? Wie würde ich Bootstrap-Buttons/Styles in einem sauberen eckigen CLI-Workflow richtig anpassen?

Sie können die Quelle finden Sie hier: SASS Werte $body-bg & $body-color sind zu ändern, nicht CSS-Werte https://github.com/nemoo/democratizer-angular/tree/ngbootstrap/frontend-angular

Answer 1

Die Werte Sie versuchen.

Sie müssen also auf die SASS-Dateien verweisen, nicht auf die CSS-Datei.

Aktualisieren der Standardstil Datei styles.css-styles.scss und in dieser Datei ...

// set the variables you wish to change 
$body-bg: $gray-dark; 
$body-color: $gray-light; 
// import in the bootstrap SASS file 
@import '../node_modules/bootstrap/scss/bootstrap' 

können Sie mehr here lesen.