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

Andrea Carraro · Accepted Answer · 2017-05-08 06:03:14Z

2

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  */
  ]
}

edited May 8, 2017 at 6:03

answered May 7, 2017 at 23:31

Andrea Carraro

10.6k5 gold badges40 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

React multiple css loaders in webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related