Personnalisation de $theme-colors Bootstrap Sass fait disparaître bg-light

Question

Bonjour. Je me remets à la pratique de Sass avec Bootstrap , et y a-t-il eu un changement pour la définition des couleurs ? Lorsque je crée mon CSS depuis le code Sass ci-dessous, j’ai l’impression que toutes les couleurs sont perdues, sauf ma personnalisation ? $theme-colors: ( "primary": #8e44ad ); @import "../../node_modules/bootstrap/scss/bootstrap"; En effet, je perds le bg-light de mon HTML . Bootstrap Sass

SAAS et BOOTSTRAP

Pablo Gonzalez · Accepted Answer

Voici la version complète avec l'ajout d'une couleur personnalisée :
// Obligatoire (Option A : inclure uniquement ce que l'on a besoin)
@import "/node_modules/bootstrap/scss/_functions.css";
// Modification couleurs existantes
$primary: #74d900;
$danger: #ff4136;
// Variables définies dans le fichier Bootstrap. $theme-colors
$theme-colors: (
"primary": $primary,
"danger": $danger
);
// Créer ses propres couleurs
$custom-colors: (
"couleurPerso": rgb(255, 0, 0)
);
// Fusionner
$theme-colors: map-merge($theme-colors, $custom-colors);
// Option B : inclure tout Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap.scss";

Louis-Nicolas Leuillet · Answer

Bonjour Olivier,
Je te recommande d'importer tes variables avant de les changer, puis d'appeler encore une fois le fichier.
@import "../../node_modules/bootstrap/scss/bootstrap";
$theme-colors: (
"primary": #8e44ad
);
@import "../../node_modules/bootstrap/scss/bootstrap";

Olivier Rabillon · Answer

Merci pour la reponse rapide.
Malheureusement cela ne fonctionne pas. La couleur primary reste le bleu de base et ne prend pas en compte ma modification.

Olivier Rabillon · Answer

J'ai trouver une solution intermediaire qui a l'air de fonctionner. Je definie juste les varibles avant
$primary: #8e44ad;
$danger: #48dbfb;
@import "../../node_modules/bootstrap/scss/bootstrap";

Olivier Rabillon · Answer

Du coup j'ai le même souci si je veux ajouter des couleurs perso je perd les couleurs de bases.

Olivier Rabillon · Answer

Bonjour. Serait-il possible d’avoir un exemple fonctionnel de modification des couleurs du thème $theme-colors avec ajout de couleurs personnalisées, car cela ne fonctionne absolument pas. Je cherche depuis 5 h ce matin et je ne trouve rien ; à chaque fois, cela fait exploser Bootstrap : plus rien ne marche.
Merci d’avance.

Olivier Rabillon · Answer

L'exemple de la vidéo ne marche plus sur la version 5.2.3 de bootstrap

Olivier Rabillon · Answer

Bonsoir, dernier message pour aujourd'hui.
Après un repos et une bonne lecture de la documentation, j'ai fini par trouver et comprendre comment faire.
// Import préalable obligatoire
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
// Définition couleur existante
$primary: #8e44ad;
$danger: #48dbfb;
// Création nouvelle couleur
$custom-colors: (
"toto": #2ecc71
);
// Merge maps
$theme-colors: map-merge($theme-colors, $custom-colors);
@import "../../node_modules/bootstrap/scss/bootstrap";
Et là, tout fonctionne.
Bonne soirée.

Louis-Nicolas Leuillet · Answer

Merci Olivier, il semble qu'il y ait une mise à jour qui ait changé le fonctionnement des personnalisations quand bien même aucune grosse modification n'avait été déclarée. Merci pour ta réponse :)

Pablo Gonzalez · Answer

Voici ma version qui fonctionne avec la version 5.3 :
// Import obligatoire
@import "/node_modules/bootstrap/scss/_functions.css";
// Modification couleurs existantes
$primary: #74d900;
$danger: #ff4136;
// Option : import de tout Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap.scss";
Voici ma source : https://getbootstrap.com/docs/5.3/customize/sass/

Louis-Nicolas Leuillet · Answer

Merci Pablo