React multiple css loaders in webpack

Question

I am using react-bootstrap and css modules. In my webpack.config.js i am able to run my bootstrap.css with this config:

{ test: /\.css$/, loader: "style-loader!css-loader" }

However my css modules should have this setup:

{
    test: /\.css$/,
    loaders: [
        'style?sourceMap',
    'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

How do I combine them to make it work for css modules and react-bootstrap

Answer 1

You might keep both loaders: one for global CSS (like Bootstrap) and the other for CSS modules.

In order to avoid conflicts between loaders with same test property, use webpack's rules include and exclude properties:

{
  test: /\.css$/,
  loader: "style-loader!css-loader",
  include: [
    /* Paths to Bootstrap and further global CSS only */
  ]
},
{
  test: /\.css$/,
  loaders: [
    'style?sourceMap',
    'css?modules&importLoaders=1&localIdentName[path]___[name]__[local]___[hash:base64:5]'
  ],
  include: [
    /* eg. Paths to your source directory  */
  ]
}