4-4 Personnalisation de Bootstrap

Nous effectuons tout ceci pour être en mesure de personnaliser Bootstrap, alors allons-y!

Nous essaierons de modifier la couleur primaire de Bootstrap (le bleu standard).

Créer _bootstrap_custom.scss. Ajoutez un fichier _bootstrap_custom.scss sous le dossier /assets/scss/.
Modifier la variable $primary. Dans ce fichier, mettre le code suivant pour modifier la variable $primary (couleur primaire) de Bootstrap.
Snowfall.Web.Mvc/assets/scss/_bootsrap_custom.scss
```
$primary: red;
```

La couleur peut être différente, pas d'importance, ce n'est que pour tester et montrer l'impact du changement de variable.

Importer le fichier personnalisé. Dans app.scss, ajoutez l'import du fichier personnalisé avant l'import de Bootstrap.
Snowfall.Web.Mvc/assets/scss/app.scss
```
// Variables personnalisées Bootstrap
@import "bootstrap_custom";

// Importation de Bootstrap
@import "bootstrap/scss/bootstrap";
```

Maintenant, exécutez le projet. Si vous avez des boutons ou des liens, ils devraient avoir changé de couleur! Sinon, mettez un bouton bootstrap quelque part dans votre page pour constater le changement.

Remarquez les liens rouges ci-bas.

http://localhost:5155/

Pour la suite du projet, j'utiliserai la couleur #5C16C5, mais libre à vous d'utiliser une autre couleur!

astuce

Pour une liste complète des variables bootstrap, rendez-vous dans le fichier suivant: Snowfall.Web.Mvc/node_modules/bootstrap/scss/_variables.scss.