Hotloading imported css styles

At the moment it seems that the post-css loader combined with ReactHotLoader and the postcss-import plugin does not auto-reload any stylesheets that get imported in a main css file.

I’ve created an example case in the following repo: https://github.com/0nn0/hotloader-postcss-imports/tree/postcss-import-plugin

You can produce the problem using the following steps.

1. Check out Branch postcss-import-plugin
2. Run npm install
3. Run npm run start
4. Open http://localhost:3000/
5. Change background-color in styles.css (change will be directly visible)
6. Change background-color in component.css (change will NOT be visible until you restart the app)

Is there a way that this can be solved?

@MoOx offered a suggestion here that the postcss-loader perhaps can make use of onImport like here if postcss-import is detected?

https://github.com/postcss/postcss-import/issues/40

[mummybot]

For those new to Webpack and coming to this thread and going “wah?!?” the exact code is:

    //webpack.config.js
    var postcssImport = require('postcss-import');
    ...
    postcss: function(webpack) {
        return [
            postcssImport({ addDependencyTo: webpack }), // Must be first item in list
            precss,
            autoprefixer
        ];
    },

Hopefully precss will support this soon, so we won’t need to use the postcss-import plugin as well.

[ZeeCoder]

Use postcss-import@8.1.0. (https://github.com/postcss/postcss-import/issues/207)