Adding custom theme-color in bootstrap

I have a problem adding custom colors to a theme I do this:

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>
...

But for some reason this does not work, or rather, the resulting css file overwrites these custom colors.

I may have made a mistake installing the bootstrap / scss packages. I installed them in this order:

1. bootstrap
2. bootstrap-react
3. scss

Or what could be the problem?