How to customize bootstrap 4 in reactjs app with reactstrap dependency?

Question

I start developing a React app with reactstrap. I followed the Get Started running the following commands :

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

npm install bootstrap --save
npm install --save reactstrap@next react react-dom

Then I can see "bootstrap": "^4.0.0" in package.json's dependencies and bootstrap/ in my project node_modules folder. Well.

Now I would like to change, for instance, the boostrap primary color. Let's start easy :). I have read Bootstrap 4 Theming but I don't find any custom.scss in my project.

What is the proper way to add and edit bootstrap theme when using reactstrap ? Plus, how do I keep my changes across bootstrap updates since /node_modules is in .gitignore ?

PS: I am new to web / react development so my apologies if I ask/say anything stupid or obvious.

Thanks

Answer 1

Instructions here: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet

1. Install Sass: npm install node-sass --save
2. Install reactstrap. First bootstrap: npm install bootstrap --save. Then reactstrap: npm install --save reactstrap react react-dom
3. create your custom bootstrap theme file src/styles/custom-btsp.scss and edit as wanted (see theming v4).
4. add import './styles/css/custom.scss'; in src/index.js

Done!

Here is an exemple of my custom-btsp.scss file:

$theme-colors: (
  "primary": #ffb800
);

$btn-border-radius: 3000px;

@import "~bootstrap/scss/bootstrap";

Answer 2

You should create SCSS file in your project structure. Include defal=ult bootstrap styles using scss import

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

and after that reassign styles.

But first thing you should to do is adjust your webpack to understand .scss file extensions