Discussion :

[YooYop]

Bonjour, n'ayant pas trouvé de solutions à ma question, j'ouvre cette discussion.
J'aimerai pouvoir utiliser bootstrap dans mon projet Angular tout en ayant modifié quelques paramètres du framework. J'aurais besoin d'ajouter quelques couleurs, modifier les grilles par exemple.
J'ai lancé cette commande dans mon projet Angular : `npm install bootstrap --save`.
À la suite de quoi, j'ai appelé bootstrap dans mon fichier styles.scss `@import "node_modules//bootstrap/scss/_functions";` et j'ai commencé à le modifier :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// COLORS
$d-gray:     #1A1A1A !default;
$l-gray:     #AEAEAE !default;
$d-orange:   #402200 !default;
$n-orange:   #E67A00 !default;
$l-orange:   #FF8700 !default;
 
$colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(
  (
    "d-gray":        $d-gray,
    "l-gray":        $l-gray,
    "d-orange":      $d-orange,
    "n-orange":      $n-orange,
    "l-orange":      $l-orange,
  ),
  $colors
);
 
$dark-gray:         $d-gray !default;
$light-gray:        $l-gray !default;
$dark-orange:       $d-orange !default;
$orange:            $n-orange !default;
$light-orange:      $l-orange !default;
 
$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
  (
    "dark-gray":        $dark-gray,
    "light-gray":       $light-gray,
    "dark-orange":      $dark-orange,
    "orange":           $orange,
    "light-orange":     $light-orange,
  ),
  $theme-colors
);

Le soucis que je rencontre avec cette façon de faire, c'est que les couleurs que j'ai ajoutées ont remplacées celles déjà présentes dans bootstrap, hors j'aurais aimé les ajouter.

code d'exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div style="height:500px;" class="w-100 d-flex justify-content-center align-items-center">
    <div class="bg-light-orange h-100 w-25 d-flex justify-content-center align-items-center">1.2.3.4.5.6.7.8.9  abcdefghijk</div>
    <div class="bg-primary border-bottom border-light-orange h-100 w-25">1.2.3.4.5.6.7.8.9  abcdefghijk</div>
</div>

résultat :


Bootstrap est bien pris en compte puisque toutes mes classes sont prises en compte, sauf bg-primary.

Est-ce qu'il est possible de faire ce que j'aimerai ? En vous remerciant de l'aide que vous m'apporterez, bonne journée.

[NoSmoking]

Bonjour et bienvenue sur DVP.

Aucun rapport avec Angular mais plutôt avec SASS.

A voir la façon de procéder sur BootStrap :

• Customise Color ;
• Customise Sass.

[YooYop]

Bonjour et merci pour la réponse c'est donc pour ça que je ne trouvais rien dans la doc Angular ^^
Je vais me pencher dessus ! Merci encore

[YooYop]

Bonjour à nouveau, je ne parviens toujours pas à ajouter des couleurs en gardant celles déjà existantes. Même en suivant les explications sur Bootstrap, en ayant cherché sur stack overflow et d'autres forums. Il doit y avoir un détail qui m'échappe depuis le début.

C'est toujours le même soucis :') la couleur customisée est prise en compte, mais plus les couleurs de base de bootstrap. Hors j'aimerais pouvoir continuer à utiliser ses couleurs natives.
fichier html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div style="height:500px;" class="w-100 d-flex justify-content-center align-items-center">
    <div class="bg-custom-color h-100 w-25 d-flex justify-content-center align-items-center">1.2.3.4.5.6.7.8.9  abcdefghijk</div>
    <div class="bg-primary border-bottom border-custom-color h-100 w-25">1.2.3.4.5.6.7.8.9  abcdefghijk</div>
</div>

fichier styles.scss

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
/* You can add global styles to this file, and also import other style files */
@import "node_modules//bootstrap/scss/_functions";
// Create your own map
$theme-colors: () !default;
$custom-colors: (
  "custom-color": #900
);
 
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
@import "node_modules/bootstrap/scss/bootstrap";

résultat :

J'ai bien compris que ce n'était pas le bon emplacement pour cette discussion, mais je ne voulais pas ouvrir de nouveau sujet alors que celui-ci l'est encore.
Merci d'avance pour votre lecture et votre compréhension bonne journée

[NoSmoking]

Pourquoi vouloir à tout prix modifier le fichier CSS BootStrap.

Il me semble plus simple de créer ton propre fichier cutom-botstrap.css et d'y faire appel ou encore de le concaténer avec le fichier bootstrap.css avec des outils comme gulp si tu tiens à n'avoir qu'un fichier.

[YooYop]

Je ne veux pas modifier le fichier bootstrap, j'aimerai ajouter des couleurs utilisables comme bootstrap le permet, avec des classes directement dans le html.
J'ai déjà un fichier à part, dans lequel je fais mes modifications, mais je n'arrive pas à faire en sorte que mes couleurs s'ajoutent à celle de bootstrap, elle les remplace (c'est l'impression que j'ai).
La seule différence avec ce que tu me propose, c'est mon fichier qui s'appelle styles.scss et non custom-bootstrap :p

Dans mon arborescence j'ai donc :

mon_projet
└── src
│   └── styles.scss     -> fichier dans lequel j'aimerai ajouter des couleurs à bootstrap
└── node_modules/
    └── bootstrap

Je fais appel à Bootstrap dans mon fichier en important le code de bootstrap.

J'ai peut être mal compris ce que tu me conseilles, mais il me semble que c'est ce que je fais déjà

Désolé si c'est une incompréhension de ma part ! Bonne journée

[NoSmoking]

Désolé si c'est une incompréhension de ma part ! Bonne journée

incompréhension surtout par rapport à la documentation de BootStrap qui pour le coup me semble pas des meilleurs !

Je suis arrivé à faire prendre une classe custom avec le fichier suivant :
custom-colors.scss

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
// Bootstrap v5.2.0-beta1 (https://getbootstrap.com/)
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
// Create your own map
$custom-colors: (
  "custom": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
// Include all of Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

ou encore plus simplement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
// Bootstrap v5.2.0-beta1 (https://getbootstrap.com/)
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
 
$custom: #690;
$theme-colors:map-merge($theme-colors, (
  "custom": $custom
));
 
@import "../node_modules/bootstrap/scss/bootstrap";

J'ai testé avec // Bootstrap v4.6.0 (https://getbootstrap.com/) et le même fichier cela fonctionne également.

Il suffit ensuite de lier le fichier, par exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" href="dist/css/custom-colors.css">

Nota : les @import et liaisons dépendent bien évidement de l'arborescence de ton projet.

Pour le moment cela fonctionne, pourvu que cela dure

[YooYop]

Bonjour bonjour !
Pour moi, cette solution ne fonctionnait qu'à moitié : mes couleurs customisées étaient appliquables sur les boutons et les textes par exemple, mais pas sur les backgrounds et autres. J'ai essayé de déclarer mes couleurs dans des variables avant de les appeler dans $custom-colors(), mais ça ne fonctionnait pas non plus...
J'ai pinaillé tout samedi pour trouver le soucis, et il semblerait que j'avais un soucis dans bootstrap.
Dans un dernier espoir, j'ai lancé la commande npm install bootstrap@5.2.0-beta1 et ça a fini pas résoudre mes soucis.

Merci beaucoup pour ta patience et tes explications sujet résolu !