1
votes

Appliquer des variables Bootstrap personnalisées dans un projet angulaire

J'essaie de remplacer les couleurs par défaut de Bootstrap dans mon projet Angular. J'ai créé un fichier _variables.scss dans mon dossier src .

À l'intérieur de ce fichier, j'ai ajouté le code suivant: $ primary: purple;

Ensuite, j'ai importé mon fichier _variables.scss dans mon principal styles.scss comme ceci: @import 'variables ';

J'ai également arrangé mon fichier angular.json pour que mes styles ressemblent à ceci:

<button type="submit" class="btn btn-primary auth-button">Sign in</button>

Ce que je voudrais réaliser, c'est que lorsque j'utilise le code suivant dans mon html:

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

la couleur de mon bouton doit être violette.

Je veux changer plus de variables plus tard et sur quelques pages, donc cela devrait être une variable globale.

angular bootstrap-4 sass

2 commentaires

Vous voulez vérifier si vous modifiez l'ordre d'importation des styles?

Dans mon styles.scss j'importe uniquement mes _variables.scss . Mon Bootstrap est inclus dans l'application via angular.json .

3 Réponses :

0
votes

vous pouvez le changer avec la classe btn-primary de bootstrap dans votre styles.scss tout en important vos variables en haut en utilisant import sur _variables.scss

.btn-primary {
   color: $primary;
}

1 commentaires

Merci, je sais que je peux le faire comme ça, mais je veux essentiellement remplacer la couleur de primaire . De cette façon, partout où j'utilise primaire , cette couleur s'appliquera.

5
votes

J'ai réussi à le résoudre en supprimant Bootstrap d'où je l'ajoute à mes styles dans angular.json et en l'important manuellement dans mon styles.scss .

J'ai également changé mon chemin Bootstrap afin de cibler le fichier scss . Voici mon code html:

"styles": [
              "src/styles.scss"
            ],

et voici mes styles dans angular.json:

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap.scss';

0 commentaires

1
votes

Vous essayez d'utiliser les fonctionnalités bootstrap-sass, mais en utilisant le css minifié.

Vous devrez soit:

utilisez bootstrap-sass

@import './_variables.scss';
@import '~bootstrap-sass/assets/stylesheets/_bootstrap';

compilez votre propre version de bootstrap avec votre thème et utilisez cette version réduite.
Si vous utilisez bootstrap 4 , vous pouvez utiliser des variables CSS à la place

0 commentaires