Question

我使用的是Facebook create-react-app。我已经完成了将SASS添加到我的应用程序的所有说明，现在我正在尝试添加Bootstrap并自定义主题。我已经能够添加引导程序但是变量的自定义不起作用。这是我的设置：

的package.json

"bootstrap": "^4.0.0-beta",

在我的React布局容器中：

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

Bootstrap工作正常，但自定义/覆盖没有效果。

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'; 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变量。在那一点上，它们不再是sass变量。您需要在编译之前覆盖它们。因此，首先将引导程序导入自定义文件，然后覆盖它。然后你可以将它们全部编译成一个.css文件。

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

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

Answer 2

看起来你正在导入已编译的bootstrap CSS：

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

您在自定义SCSS中设置的变量不会对此产生任何影响。

导入变量，然后引导SCSS。省略！default标志。例如：

<强>风格/ styles.scss

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

<强>风格/ _variables.scss

$theme-colors: (
    primary: orange
);

如何在React应用程序中自定义Bootstrap变量？

更新

2 个答案: