I would like to use Bootstrap in my create-react-app application. I would like all of my CSS to be scoped to their respective components (via CSS modules) but I would like to apply the Bootstrap CSS to my entire application so that the standard controls look a bit nicer.
First, I've installed Bootstrap via
npm install --save bootstrap
After I did some research on stackoverflow I found this answer and tried to modify my webpack.config.dev.js file. It now looks like this:
{
test: /\.css$/,
exclude: '/node_modules/bootstrap/',
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]',
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
// don't apply CSS modules to all .css files in node_modules/bootstrap
test: /\.css$/,
include: '/node_modules/bootstrap/',
use: ['style-loader', 'css-loader']
},
I am importing the Bootstrap CSS in my index.js like so:
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
However, the Bootstrap CSS does not get applied. Can anyone point my into the right direction why that is? Do I need a different config my webpack.config.dev.js file?
