如何在React應用程序中自定義Bootstrap變量？

Question

我使用Facebook的create-react-app ..我已經完成了所有的指令SASS添加到我的應用程序...現在我想要添加的引導和定製的主題。我已經能夠添加自舉，但變量的自定義不起作用。這裏是我的設置：

的package.json

"bootstrap": "^4.0.0-beta", 

在我的陣營佈局容器：

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

引導工作正常，但自定義/覆蓋不產生效果。

custom_bootstrap.scss：

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

主要仍是藍色的......我在做什麼錯在這裏？由於

修訂

MainLayout.jsx

import '../styles/index.css' 

index.scss

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

如果我刪除@import 'custom_bootstrap';引導編譯成功。

如果我將其重新添加和更新以下內容：

_custom_bootstrap.scss

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

我收到編譯像這樣的錯誤：

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

想法？

Answer 1

您無法更改已編譯的.css引導程序文件中的sass變量。他們不再是那個時候的變數。你需要在編譯之前重寫它們。因此，首先將bootstrap導入到自定義文件中，然後重寫它。然後你可以把它編譯成一個.css文件。

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

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

Answer 2

它看起來像要導入的編譯引導CSS：您在您的自定義設置SCSS

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

變量不會對這個任何影響。

導入您的變量，然後引導的SCSS。省略！默認標誌。例如：

款式/樣式。SCSS

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

風格/ _variables.scss

$theme-colors: (
    primary: orange 
);