5

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

包.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;

初级仍然是蓝色的。我在这里做错了什么？

更新

主布局.jsx

import '../styles/index.css'

索引.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  | }
4

2 回答 2

4

看起来您正在导入已编译的引导 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
);
于 2017-10-12T16:39:40.483 回答
2

您不能更改已编译的 .css 引导文件中的 sass 变量。那时它们不再是 sass 变量。您需要在编译它们之前覆盖它们。因此，首先在引导程序中导入您的自定义文件，然后覆盖它。然后你可以将它全部编译成一个 .css 文件。

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

$theme-colors: (
  primary: orange
) !default;
于 2017-10-12T16:38:46.120 回答