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 !!

huma2

Vous semblez être sur la bonne voie en modifiant les couleurs du thème dans votre application Symfony en utilisant les variables et les cartes Bootstrap Sass. Il est cependant possible que les noms de classe que vous utilisez pour le texte et les couleurs d'arrière-plan soient incorrects.

Bootstrap inclut des classes utilitaires pour le texte et les couleurs d'arrière-plan par défaut, en utilisant la convention de dénomination :

Couleurs pour le texte : .text-color
Couleurs pour le fond : .bg-color
Dans votre scénario, vous devriez pouvoir appliquer la couleur personnalisée au texte et à l'arrière-plan en utilisant respectivement.text-mycolor et.bg-mycolor.

Personnalisé Bootstrap CSS avec Sass - theme-colors

3 réponses