3

Following this tutorial, I've managed to override Bootstrap 5 default colors in my React application created with create-react-app. Inside my /src/scss/custom.scss I can call any of my new defined variables and use it at will, and even new created classes inside custom.scss are working just fine. Nevertheless, the default Bootstrap classes that use colors (as btn-primary, bg-secondary or text-white) doesn't change at all. When I use btn-primary, for example, the button color is the same old blue color that is the default Bootstrap primary color.

What am I missing?

isherwood
  • 58,414
  • 16
  • 114
  • 157
André Carvalho
  • 111
  • 1
  • 11

1 Answers1

5

Make sure you @import Bootstrap after the custom.scss. This will let your changes override the theme color !defaults in Bootstrap variables.scss (referenced in bootstrap.scss).

/* custom.scss */
$primary: #362ec4;
$secondary: #8f5325;
$success: #3e8d63;
$info: #7854e4;
$warning: #b8c924;
$danger: #d62518;
$light: #f8f9fa;
$dark: #343a40;
/* end custom.scss */

@import '~bootstrap/scss/bootstrap.scss';

React on Codeply

Also, note the article is unnecessarily re-building the theme-colors map which isn't necessary unless you're adding a new theme color variant ie; $accent.

Also see: Unable to override $theme-color in bootstrap

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • I'm importing `custom.scss` in my `index.js` file (the file with `ReactDOM.render()` method, the same place where I import the `bootstrap.min.css`. Should I do any changes in the `package.json` scripts in order to recompile bootstrap everytime I run `npm start` to start the development server? – André Carvalho Aug 03 '21 at 16:31
  • 1
    I don't think you should be importing bootstrap.min.css at all. It will negate any changes in custom.scss. – Carol Skelly Aug 03 '21 at 16:49
  • I'm accepting this as an answer because it get the root of the problem: I indeed was importing bootstrap.min.css AFTER importing custom.scss, so this was overiding all changes I'd made in Bootstrap. – André Carvalho Aug 07 '21 at 18:08