覆盖 Bootstrap 5 种颜色不会改变 btn 颜色 类
Overriding Bootstrap 5 colors doesn't change btn color classes
按照本教程 here，我已经成功地在使用 create-react-app 创建的 React 应用程序中覆盖了 Bootstrap 5 种默认颜色。在我的 /src/scss/custom.scss 中，我可以调用任何新定义的变量并随意使用它，甚至在 custom.scss 中新创建的 类 也能正常工作。然而，使用颜色（如 btn-primary、bg-secondary 或 text-white）的默认 Bootstrap 类 根本没有改变。例如，当我使用 btn-primary 时，按钮颜色与默认的 Bootstrap 原色相同的旧蓝色。
我错过了什么？
确保在 custom.scss 之后@import Bootstrap 。这将使您的更改覆盖 !defaults in Bootstrap variables.scss（在 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';
此外，请注意本文不必要地重新构建主题颜色映射，除非您要添加新的主题颜色变体，否则没有必要这样做； $口音。
另见：
按照本教程 here，我已经成功地在使用 create-react-app 创建的 React 应用程序中覆盖了 Bootstrap 5 种默认颜色。在我的 /src/scss/custom.scss 中，我可以调用任何新定义的变量并随意使用它，甚至在 custom.scss 中新创建的 类 也能正常工作。然而，使用颜色（如 btn-primary、bg-secondary 或 text-white）的默认 Bootstrap 类 根本没有改变。例如，当我使用 btn-primary 时，按钮颜色与默认的 Bootstrap 原色相同的旧蓝色。
我错过了什么？
确保在 custom.scss 之后@import Bootstrap 。这将使您的更改覆盖 !defaults in Bootstrap variables.scss（在 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';
此外，请注意本文不必要地重新构建主题颜色映射，除非您要添加新的主题颜色变体，否则没有必要这样做； $口音。
另见：