不能覆盖引导变量

Question

我试图覆盖引导的颜色，按照文档，但没有改变。

我使用react-bootstrap@2和bootstrap@5

这是我的根sass文件:

// Presence of these two imports doesn't make a difference
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables"; // Moving this line under the custom variables also doesn't work
$primary: #222;
$theme-colors: (
primary: #222,
);
// Tried map-merge, no effect
// $theme-colors: map-merge(
//  $theme-colors,
//  (
//      primary: #222,
//  )
// );
$white: #000;
$black: #fff;
@import "~bootstrap/scss/bootstrap";

我查阅了许多类似问题的答案，但没有一个适合我。

Answer 1

在不知道您的确切设置和文件组成的情况下:

• 创建一个App.scss文件

• 定义变量覆盖

• Import bootstrap in end

• 在上层组件中导入这个。scss文件，即App.jsx

  美元主要:红色;

  /* import bootstrap to set changes */@ import"~引导/scss/bootstrap";

https://codesandbox.io/s/sharp-drake-3cevf3