CSS not saving when using PostCSS in Gatsby.js development mode

Question

When using PostCSS with CSS modules in Gatsby.js, when I fire up development mode, the CSS files are not applied. To resolve it, I have to open each CSS file and save it for it to be applied.

I'm using the gatsby-plugin-postcss plugin. We use CSS module like style.module.css. Everything works when each CSS file is manually saved or when in build mode.

How can I resolve the CSS bug on gatsby.js?

Answer 1

I wouldn't say it's a bug, it possibly a default configuration. According to the docs:

If you need to override the default options passed into css-loader

Note: Gatsby is using css-loader@1.0.1

// in gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-postcss`,
    options: {
      cssLoaderOptions: {
        // your options here
      },
    },
  },     
],

Take a look at available options for the 1.0.1 versions to check if some of them fit your requirements to make it work in development mode.