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

Posted 2023-03-23

【中文标题】如何在 React 应用程序中自定义 Bootstrap 变量？

【英文标题】：How to customize Bootstrap variables in a React app?

【发布时间】：2018-03-24 16:20:14

【问题描述】：

我正在使用 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';

引导程序工作正常，但自定义/覆盖没有效果。

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  | 

【参考方案1】：

看起来您正在导入已编译的引导 CSS：

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

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

导入您的变量，然后导入引导程序的 SCSS。省略 !default 标志。示例：

styles/styles.scss

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

styles/_variables.scss

$theme-colors: (
    primary: orange
);

【讨论】：

感谢 pixleight，我想我们已经接近了，但上面给出了一个新的错误，请参阅上面有问题的更新。谢谢！

尝试使用十六进制代码而不是颜色名称：例如#ffa500。

【参考方案2】：

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

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

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

【讨论】：

感谢 Eric，我想我们已经接近了，但上面给出了一个新错误，请参阅上面的更新问题。谢谢！

您应该在引导文件之后导入您的自定义文件。这可能是相关的。您希望您的自定义样式覆盖引导程序默认值。

如果我在引导后移动自定义文件，它会编译但没有进行任何更改...自定义不会生效

所以说的顺序是正确的，你的自定义样式肯定有问题。这个$theme-color 变量存在于哪个引导文件中？我在源 sass 中找不到它。

它位于 _variables.scss 中