Bootstrap 4 variables personnalisées ne l'emporte pas sur

Question

J'ai une principale styles.scss comme ceci:

//@import "../components/bootstrap/scss/bootstrap"; 

// Core variables and mixins 
@import "../components/bootstrap/scss/functions"; 
@import "../components/bootstrap/scss/mixins"; 
@import "components/variables"; 
@import "../components/bootstrap/scss/variables"; 

J'essaie de passer outre la variable de succès dans mon components/variables comme ceci:

$green: #71c835 !important;

Mais il ne cesse de ramasser la couleur du bootstrap variables.scss qui est $green: #28a745 !default;

Pour créer un clair vue j'ai essayé allready de changer la séquence de ces deux fichiers comme ceci:

// Core variables and mixins 
@import "../components/bootstrap/scss/functions"; 
@import "../components/bootstrap/scss/mixins"; 
@import "../components/bootstrap/scss/variables"; 
@import "components/variables"; 

Il me rend vraiment fou comment puis-je simplement remplacer les variables bootstrap

Answer 1

$green: #71c835 !important; signifie définir la valeur de la variable verte ce code hexadécimal suivi par important. Cela ne veut pas dire Définissez la valeur de la variable verte sur ce code hexadécimal et ignorez les tentatives suivantes pour modifier cette valeur.

---

Vous ne pouvez pas empêcher la modification d'une variable.

Vous devez écrire votre code dans le bon ordre.

Si vous souhaitez remplacer ../components/bootstrap/scss/variables de components/variables puis importer components/variablesaprès l'autre.

Answer 2

Utilisez le premier cas et enlever !default

..... 
@import "components/variables"; 
@import "../components/bootstrap/scss/variables"; 

Copier coller la variable que vous souhaitez remplacer et modifier la valeur. et supprimez l'attribut !default. Compilez-le à nouveau.

L'attribut !default fonctionne comme inverse de! Important. Cela prend donc la valeur de la variable précédemment déclarée. donc supprimez le !default

!important; // gagne toujours.

!default; // si la variable a déjà été affectée, prenez celle-ci à la place. - Reference

---

Alors maintenant components/variables

$green: #71c835; 

et ../components/bootstrap/scss/variables

$green: #28a745; 

Answer 3

Peut-être que vous créez override.scss et mettre l'ourlet après que vous êtes variables.scss

@import "../components/bootstrap/scss/variables.scss"; 
@import "custome/scss/override.scss"; 

Code override.scss:

$green: #you_code;