Comment personnaliser bootstrap 4 en utilisant angular-cli

Question

J'ai une application Angular 4 en utilisant angular-cli 1.0 et Bootstrap 4-alpha6. Je veux personnaliser Bootstrap 4. E.g. changez la couleur des boutons primaires.

Il doit s'agir d'une solution à l'épreuve du temps. Cela signifie que mes personnalisations doivent survivre à des mises à niveau de bootstrap à un moment ultérieur. J'ai intégré bootstrap par: Ajout de "bootstrap": "4.0.0-alpha.6", aux dépendances dans mon fichier package.json. De plus

I ajouté

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

-"apps" en cli.json angulaire.

Mon premier essai a été de créer un nouveau fichier nommé style.scss, de le placer dans src/assets et de le référencer dans angular-cli.json.

Le contenu pourrait ressembler à ceci:

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

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

Lors de l'exécution ng serve l'application comiles bien, mais je ne vois pas de changement. Est-ce que j'ai même commencé dans la bonne direction?

Comment est-ce que je pourrais customiser correctement les boutons/styles de bootstrap via sass dans un workflow angulaire-cli propre?

Vous pouvez trouver la source ici: https://github.com/nemoo/democratizer-angular/tree/ngbootstrap/frontend-angular

Answer 1

Les valeurs que vous essayez de changer $body-bg & $body-color sont des valeurs SASS, pas des valeurs CSS.

Vous devrez donc référencer les fichiers SASS et non le fichier CSS.

Mise à jour du fichier de style par défaut styles.css-styles.scss et dans ce fichier ...

// 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' 

Vous pouvez en lire plus here.