Comment personnaliser les variables Bootstrap dans une application React?

Question

J'utilise facebook's create-react-app .. J'ai complété toutes les instructions pour ajouter SASS à mon application ... maintenant j'essaye d'ajouter le bootstrap et customise le thème ... j'ai pu ajouter le bootstrap mais la personnalisation des variables ne fonctionne pas. Voici ma configuration:

package.json

"bootstrap": "^4.0.0-beta", 

Dans mon React conteneur de présentation:

import 'bootstrap/dist/css/bootstrap.css'; 
import '../styles/custom_bootstrap.scss'; 

bootstrap fonctionne bien, mais les personnalisations/overrides ne sont pas un effet.

custom_bootstrap.scss:

$theme-colors: (
    primary: orange 
) !default; 

Le primaire est encore bleu ... Qu'est-ce que je fais mal ici? Merci

À JOUR

MainLayout.jsx

import '../styles/index.css' 

index.scss

@import 'custom_bootstrap'; 
@import 'bootstrap/scss/bootstrap'; 

Si je supprime @import 'custom_bootstrap'; bootstrap compile avec succès.

Si je l'ajoute en arrière et mettre à jour les éléments suivants:

_custom_bootstrap.scss

$theme-colors: (
    primary: orange 
) !default; 

Je reçois des erreurs de compilation comme ceci:

09:44:56 web.1 | => changed: /Users/xxx/sites/xxx/client/src/styles/index.scss 
09:44:56 web.1 | { 
09:44:56 web.1 | "status": 1, 
09:44:56 web.1 | "file": "/Users/xxx/sites/xxx/client/node_modules/bootstrap/scss/_forms.scss", 
09:44:56 web.1 | "line": 280, 
09:44:56 web.1 | "column": 21, 
09:44:56 web.1 | "message": "argument `$color` of `rgba($color, $alpha)` must be a color\n\nBacktrace:\n\tnode_modules/bootstrap/scss/_forms.scss:280, in function `rgba`\n\tnode_modules/bootstrap/scss/_forms.scss:280", 
09:44:56 web.1 | "formatted": "Error: argument `$color` of `rgba($color, $alpha)` must be a color\n\n  Backtrace:\n  \tnode_modules/bootstrap/scss/_forms.scss:280, in function `rgba`\n  \tnode_modules/bootstrap/scss/_forms.scss:280\n  on line 280 of node_modules/bootstrap/scss/_forms.scss\n>> background-color: rgba($form-feedback-invalid-color,.8);\n --------------------^\n" 
09:44:56 web.1 | } 

idées?

Answer 1

Vous ne pouvez pas modifier les variables sass contenues dans le fichier bootstrap .css compilé. Ils ne sont plus des variables sass à ce moment-là. Vous devez les remplacer avant qu'ils ne soient compilés. Commencez donc par importer dans bootstrap votre fichier personnalisé, puis remplacez-le. Ensuite, vous pouvez compiler le tout en un seul fichier .css.

import 'bootstrap/dist/css/bootstrap.scss'; 

$theme-colors: (
    primary: orange 
) !default; 

Answer 2

Il semble que vous importez le CSS bootstrap compilé:

import 'bootstrap/dist/css/bootstrap.css'; 

variables définies dans votre SCSS personnalisé n'auront aucun effet sur ce point. Importez vos variables, puis SCSS bootstrap. Omettez le drapeau! Default. Exemple:

styles/styles.SCSS

@import 'variables'; 
@import '[relative path to boostrap]/scss/bootstrap'; 

styles/_variables.scss

$theme-colors: (
    primary: orange 
);