How to setup bootstrap-material-design react for theme overwrite

Question

I am looking to start a new react project and I was hopeful about using bootstrap-material-design but I'm not sure how to setup the project to overwrite the theme. The documentation talks about adding custom sass but I am not familiar with sass. I was hoping someone knew what step you need to get this working. I've created a fresh react app with npx create-react-app and installed the package with npm via npm install [email protected]. I've also added a scss folder at the root level of the project with a custom.scss file in that folder. currently the only code added to that file is an import of their sass files with @import "node_modules/bootstrap/scss/bootstrap"; but nothing seems to happen when I add a material design component such as a Navbar. I also import the custom.scss file in the index.js file with import './scss/custom.scss'; but I am still getting the following error: File to import not found or unreadable: ../../node_modules/bootstrap/scss/bootstrap.

I guess my question is has anyone successfully used this package in a react project by using npm to install rather than using the cdn and if so can they tell me the steps require to get this up and running so I can re-theme bootstrap-material-design with my own branding.

Thanks!

Answer 1

1. Install required package
   npm install bootstrap-material-design node-sass
2. Add SASS path
   open .env, add following magic
   SASS_PATH=node_modules:src or SASS_PATH=./node_modules;./src for windows
3. Rename App.css to App.scss
4. Open App.scss
   Add following code: @import 'bootstrap-material-design/scss/bootstrap-material-design.scss';

So far work for me.