Forum : Personnalisé Bootstrap CSS avec Sass - theme-colors

J'ai un problème avec Bootstrap CSS (v5.2) pour ajouter une couleur au color map dans mon application Symfony (v6.2).

J'essaie d'ajouter une couleur à 'theme-color' est de mettre à jour tous les utilities afin que cette couleur soit utilisable avec toutes les classes html correspondant. Voici mon code :

Dans app.scss :

@import "~bootstrap/scss/bootstrap";
@import "custom";
@import "~bootstrap/scss/bootstrap";

Dans custom.scss :

$custom-theme-colors: (
    "mycolor": #006A4E
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

$utilities-colors: $theme-colors-rgb;

$utilities-text: $utilities-colors;
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

$utilities-bg: $utilities-colors;
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");

$utilities-border: $utilities-colors;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border");

Ceci marche avec les boutons (.btn-mycolor) mais pas avec le texte ou les arrière plans (.text-mycolor ou bg-mycolor).

Où est-ce que je me trompe ? Quelqu'un aurait-il une solution à me proposer ?

Merci d'avance !

popotte

Réponse acceptée

Hello :)

Alors le problème c'et que tu importes deux fois Bootstrap, il faut que tu ne le charges qu'une fois, ensuite tu charges bootstrap en premier, donc les variables sont déjà initialisées avant que tu ne les changes:

@import "custom"; /* les variables */
@import "~bootstrap/scss/bootstrap";

Après le mieux c'est d'éclater Bootstrap au lieux de tout importer d'un coup, point de vue de la doc Bootstrap faut faire comme ça:

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "~bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";

// 4. Include any optional Bootstrap CSS as needed
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/helpers";

// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "~bootstrap/scss/utilities/api";

// 6. Add additional custom code here

AdBouli

Auteur

Réponse acceptée

Super merci effectivement en incluant uniquement ce dont j'avais besoin pour mon fichier 'custom.scss' les classes html .text-mycolor et .bg-mycolor fonctionnent.

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "custom";
@import "~bootstrap/scss/bootstrap";

Merci beaucoup !!

Personnalisé Bootstrap CSS avec Sass - theme-colors

2 réponses