0

I am trying to override Bootstrap colors, following the docs, but nothing changes.

I'm using react-bootstrap@2 and bootstrap@5

Here is my root sass file:

// 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";

I've looked up at many answers of similar problems but none worked for me.

nick here
  • 109
  • 2
  • 8

1 Answers1

-1

Without knowing your exact setup and file composition:

  • Create for example an App.scss file

  • Define your variable overrides

  • Import bootstrap in the end

  • Import this .scss file in your upper component, i.e. App.jsx

    $primary: red;

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

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

Igor Gonak
  • 2,050
  • 2
  • 10
  • 17
  • This is what I did, the file is imported in my `index.tsx`. The import works since other styles show properly – nick here May 02 '22 at 01:28
  • Please provide a reproducible example then. Your code above is not sufficient. As you can see everything works in the sandbox. So the question is: what is different in your setup? – Igor Gonak May 02 '22 at 04:19