覆盖 Bootstrap 5 颜色不会改变 btn 颜色类答案

【问题标题】：Overriding Bootstrap 5 colors doesn't change btn color classes覆盖 Bootstrap 5 颜色不会改变 btn 颜色类
【发布时间】：2021-10-08 04:02:09
【问题描述】：

按照本教程 here，我已经设法在使用 create-react-app 创建的 React 应用程序中覆盖 Bootstrap 5 默认颜色。在我的/src/scss/custom.scss 中，我可以调用任何新定义的变量并随意使用它，甚至custom.scss 中新创建的类也可以正常工作。尽管如此，使用颜色的默认 Bootstrap 类（如btn-primary、bg-secondary 或text-white）根本没有改变。例如，当我使用 btn-primary 时，按钮颜色与作为默认 Bootstrap 原色的旧蓝色相同。

我错过了什么？

【问题讨论】：

标签： css reactjs twitter-bootstrap react-bootstrap bootstrap-5

【解决方案1】：

确保@import Bootstrap 在 custom.scss 之后。这将使您的更改覆盖 Bootstrap variables.scss 中的主题颜色 !default（在 bootstrap.scss 中引用）。

/* custom.scss */
$primary: #362ec4;
$secondary: #8f5325;
$success: #3e8d63;
$info: #7854e4;
$warning: #b8c924;
$danger: #d62518;
$light: #f8f9fa;
$dark: #343a40;
/* end custom.scss */

@import '~bootstrap/scss/bootstrap.scss';

React on Codeply

另外，请注意本文不必要地重新构建主题颜色映射，除非您添加新的主题颜色变体，否则没有必要，即； $口音。

另见：Unable to override $theme-color in bootstrap

【讨论】：

我在我的index.js 文件中导入custom.scss（使用ReactDOM.render() 方法的文件，与我导入bootstrap.min.css 的位置相同。我应该在@987654330 中做任何更改吗？ @ 脚本以便每次我运行 npm start 启动开发服务器时重新编译引导程序？
我认为您根本不应该导入 bootstrap.min.css。它将否定 custom.scss 中的任何更改。
我接受这个作为答案，因为它解决了问题的根源：我确实在导入 custom.scss 之后导入 bootstrap.min.css，所以这覆盖了我所做的所有更改在引导程序中。