Cant use css modules in React with Bootstrap4

Question

I want to use React CSS modules with Bootstrap.

First, I created a project with the create-react-app command. Then, I installed Bootstrap 4 with NPM and included it in my app.js like:

import 'bootstrap/dist/css/bootstrap.css';

I also did npm eject to have access to my Webpack config file.

Meanwhile I wanted to use CSS modules in my layout.js file, so I went to webpack.config.dev.js and changed modules to true:

test: /\.css$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              modules: true       

            }

When I change modules to true Bootstrap CSS is not showing correctly. If I change modules to false then Bootstrap is working. Any idea?

Modules: true

Modules: false

Alex Brazh · Accepted Answer · 2018-02-01 06:19:15Z

0

Here's a good discussion how to use CSS-modules with other global CSS (e.g. Bootstrap)

https://github.com/css-modules/css-modules/pull/65

Hope it helps.

I had same issue and just loaded bootstrap directly in the index.html from public folder. My project not so big to include bootstrap in the same bundle

P.S.

Actually, I also tried this solution and it works good for me. https://github.com/css-modules/css-modules/issues/113

I just renamed all of my global css files as .global..css

{
  test: /^((?!\.global).)*\.css$/,  // anything with .global will not 
go through css modules loader
  loaders: [
    'style-loader',
    'css-loader?modules&sourceMap&importLoaders=1&localIdentName=
[name]__[local]___[hash:base64:5]',
    'postcss-loader'
  ]
}

edited Feb 1, 2018 at 6:19

answered Jan 31, 2018 at 8:00

Alex Brazh

5406 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cant use css modules in React with Bootstrap4

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related