在引导程序中添加自定义主题颜色

Question

我在为主题添加自定义颜色时遇到问题 我这样做：

App.scss

$theme-colors: (
  "primary": #030304,
  "success": #D22470,
  "warning": #4A447A,
  "info": #414A71,
  "danger": #5B1E5A
);
@import '~bootstrap/scss/bootstrap.scss';

App.tsx

...    
import './App.scss';
import { Header } from './Header/Header';

function App() {
  return (
    <div className="App">
      <Header />
    </div>
  );
}
...

Header.tsx

...
<Button variant="success" size='lg' href="/">Register</Button>
...

但由于某种原因这不起作用，或者更确切地说，生成的 css 文件覆盖了这些自定义颜色。

我可能在安装 bootstrap / scss 包时犯了一个错误。我按以下顺序安装它们：

1. 引导程序
2. 引导反应
3. scss

或者可能是什么问题？