title: Cannot override bootstrap variables
body: <p>I am trying to override Bootstrap colors, following the <a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults" rel="nofollow noreferrer">docs</a>, but nothing changes.</p>
  <p>I'm using <code>react-bootstrap@2</code> and <code>bootstrap@5</code></p>
  <p>Here is my root sass file:</p>
  <pre><code>// Presence of these two imports doesn't make a difference
  @import &quot;~bootstrap/scss/functions&quot;;
  @import &quot;~bootstrap/scss/variables&quot;; // 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 &quot;~bootstrap/scss/bootstrap&quot;;
  </code></pre>
  <p>I've looked up at many answers of similar problems but none worked for me.</p>