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

Question

probably a newbie questions (starting with REACT) but I am unable to change the theme colors in my newly bootstrapped react application.

I read some answers but unfortunately, they did not work for me.

I have the following entry point:

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './components/App';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import './styles/app.scss';

ReactDOM.render(<App />, document.getElementById('app'));

and I have app.scss style sheet in src/styles:

@import '_settings.scss';
@import '_base.scss';
@import './components/_header.scss';

I tried changing the theme colors here but it doesn't seem to do anything:

@import "node_modules/bootstrap/scss/bootstrap";

$theme-colors: (
  "primary": #991196,
  "danger": #ff4136
);

Could someone point out to me how this works since all the answers and tuturials I came across seem to be using different approaches.

I am using the following version of Bootstrap:

"bootstrap": "^4.0.0"

Answer 1

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

Answer 2

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