With webpack bundling, how can you make a required css file only apply to the component it is required on?

Question

I have webpack looking for required css like this:

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

The problem is the css required by one component seems to be affecting other components. My understanding was that the css file required in a component would be scoped to that component and that component alone. Am I doing something the wrong way or is the functionaltiy I'm looking for not possible with webpack style loading?

Answer 1

By default, the css loader bundles your css to a global scope. You need to first enable CSS modules, in your case by doing:

{
  test: /\.css$/,
  loader: 'style-loader!css-loader?modules'
},

Then write your css as normal:

.className { color: green; }

Webpack will compile your css with unique class names, which you can access through the exported module.

require styles from 'styles.css';

console.log(styles.className) // <-- the compiled classname