Wie können Bootstrap-Variablen in einer React-App angepasst werden?

Question

Ich benutze facebook create-react-app .. Ich habe alle Anweisungen zum Hinzufügen von SASS zu meiner App abgeschlossen ... jetzt versuche ich Bootstrap hinzuzufügen und das Thema anpassen ... Ich konnte Bootstrap aber hinzufügen Das Anpassen der Variablen funktioniert nicht. Hier ist mein Setup:

package.json

"bootstrap": "^4.0.0-beta", 

In meinem Layout Container Reagieren:

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

Bootstrap funktionieren gut, aber die Anpassung/Überschreibungen haben keine Wirkung.

custom_bootstrap.scss:

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

Der primäre noch blau ist ... Was mache ich hier falsch? Dank

MainLayout.jsx

import '../styles/index.css' 

index.scss

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

AKTUALISIERT Wenn ich @import 'custom_bootstrap'; Bootstrap entfernen erfolgreich kompiliert.

Wenn ich es wieder hinzufügen und aktualisieren Sie die folgenden Schritte aus:

_custom_bootstrap.scss

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

Ich bin Fehler kompilieren wie so bekommen:

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

Ideen?

Answer 1

Sie können SASS-Variablen, die sich in der kompilierten .css-Bootstrap-Datei befinden, nicht ändern. Sie sind zu diesem Zeitpunkt keine Sass-Variablen mehr. Sie müssen sie überschreiben, bevor sie kompiliert werden. Beginnen Sie also mit dem Bootstrap-Import in Ihre benutzerdefinierte Datei und überschreiben Sie sie dann. Dann können Sie alles in eine .css-Datei kompilieren.

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

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

Answer 2

Es sieht aus wie Sie die kompilierte Bootstrap CSS importieren:

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

Variablen Sie in Ihrem benutzerdefinierten SCSS eingestellt wird keine Auswirkungen auf diese haben.

Importieren Sie Ihre Variablen, dann Bootstrap SCSS. Entfernen Sie das Standard-Flag! Beispiel:

Stile/Stile.SCSS

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

styles/_variables.scss

$theme-colors: (
    primary: orange 
);