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-a         


        

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