覆盖 Bootstrap 5 颜色不会更改 btn 颜色类别

Question

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

我缺少什么？

Answer 1

确保在custom.scss.​ 这将使您的更改覆盖Bootstrap 中的主题颜色!defaultvariables.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';

在 Codeply 上做出反应

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

另请参阅：无法在引导程序中覆盖 $theme-color