How to integrate Reactstrap into mern-starter

[chung2014]

I would like to use reactstrap with this mern-starter. But I find that I cannot start the project with npm start properly after I add an import statment in client/modules/App/App.js e.g import 'bootstrap/dist/css/bootstrap.css';

[theevilhead]

Hey @chung2014, I think the error you are getting is related to webpack loader. It just needs to be loaded no need to complie it.

Add the below to webpack.config.babel.js just like in the image below for now and use minified version import 'bootstrap/dist/css/bootstrap.min.css';

If you want to customize the use of bootstrap in your project I think its better to follow bootstrap guide to importing styles/compile sass for that this change will not be needed https://getbootstrap.com/docs/4.0/getting-started/webpack/

{
        test: /\.min.css$/,
        use: ['style-loader', 'css-loader']
},

[chung2014]

@theevilhead Yes, working with webpack settings is complex. And your suggest works. After adding the snippet into webpack.config.babel.js, I can run npm run start without error. How about if I run npm run build or npm run build:server, do I need to change my webpack config files for those environment as well?

[chung2014]

@theevilhead After I check the webpack config files, I found that all webpack.config.(dev|prod|server).js contain the code snippet you suggested, so why it is the case that only webpack.config.babel.js doesn't contains it. Should all 4 config file be same?

Btw, I just want to know what is the intent behind. thank 🤓

[theevilhead]

Hey @chung2014 sorry for the delay in reply. Glad the suggestion works and I cannot be of more help here because my involvement with project has started recently, so I think the original contributors might have missed it but I dont know the exact intent though.