Webpack CSS Modules Not Loading New Code

Question

I'm having a very weird issue where any new CSS files I create and import in my JS code do not get added to the output file. My webpack config is set up to bundle all CSS files required in my React components into one output file called styles.css. Here are the relevant parts of my config:

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ 
          fallback: 'style-loader',
          use: ['css-loader?modules=true&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'],
        })
      },
      ...
    ],
  },
  ...
  plugins: [
    ...
    new ExtractTextPlugin('css/styles.css'),
    ...
  ],
};

This config creates a file called styles.css and puts it in a directory called css in my output directory.

Heres the weird part: It currently generates the hashed class names for all of the files that are imported in my code, but it ignores the class definitions of some files (on a consistent basis).

I was using these versions of the packages:

"css-loader": "^0.28.4",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"webpack": "^2.6.1",

I even tried updating all of the packages, but the problem persisted.

I tried running webpack on three different machines, in both production and development mode, and always get the same results.

Any ideas? Am I missing anything here?

Answer 1

I actually found an answer: I was using chunks as separate entry points in my webpack, but was (quite carelessly) rewriting the same CSS file without regard to the different needs of the different entry points. Until now, I had mostly the same CSS rules for all of my entry chunks, which is why I didn't see this before.

D'oh!