Cant use css modules in React with Bootstrap4

问题

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

回答1:

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'
  ]
}

来源：https://stackoverflow.com/questions/47731797/cant-use-css-modules-in-react-with-bootstrap4

标签

reactjs

Webpack

bootstrap-4

create-react-app

react-css-modules