How to override Bootstrap theme colors in bootstrapped react/redux app?

First refer this, Bootstrap webpack

This is one way of using bootstrap in reactjs projects.

You are importing compiled version of bootstrap css by doing this

import 'bootstrap/dist/css/bootstrap.min.css'; //Dont do this

Instead you should do this

In your app.scss file,

first define your color

$primary: #13C7CD;$danger: #red;

then

import scss version of bootstrap

@import '~bootstrap/scss/bootstrap';

~ means webpack will search for it in node_modules

After this import the app.scss file in your main js file(can be index.js or app.js)

import './styles/app.scss';

How this works

When you define your color variables before importing bootstrap scss, the resulting complied css will have your color values

You can make the overrides and import Bootstrap entirely in the app.scss file. It's important the Bootstrap is imported after the theme color changes to override the !default theme-colors defined in bootstrap _variables.scss.

    @import '_settings.scss';    @import '_base.scss';    @import './components/_header.scss';    /* import only the Bootstrap files needed for customizations */    @import "node_modules/bootstrap/scss/functions";    @import "node_modules/bootstrap/scss/variables";    /* make the customizations */    $theme-colors: (      "primary": #991196,      "danger": #ff4136    );    /* import bootstrap to set changes */    @import "node_modules/bootstrap/scss";

When the react app is built and the SASS is compiled then generated CSS will contain your customizations and Bootstrap so that you won't need to separately import bootstrap in react.

Demo: https://www.codeply.com/go/Tho2TEwoI1

The simplest way...

Just import/define YOUR styles before BOOTSTRAP styles. That's it! 'Happy hacking'