Webpack 3 + PostCSS does not hotloading when changed css file of @import

Question

Here is my css webpack config

{ test: /\.css$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } }, { loader: 'postcss-loader', options: { sourceMap: true, // https://github.com/postcss/postcss-loader/issues/92 // https://github.com/postcss/postcss-loader/issues/8 plugins: () => [ precss(), postcssImport({ addDependencyTo: webpack }), postcssNested(), postcssCssnext({ browsers: ['last 2 versions', 'ie >= 9'], compress: true, }), ], }, }, ], }

And I'm using Webpack 3, the hotloading feature doesn't work if I touch a css file that is an @import, people suggesed me to put postcssImport({ addDependencyTo: webpack }) to the first line of the plugin, but if I put before the precss, I got an compilation error.

I wonder if there is anything wrong with the above config, any help is appreciated.

You can reproduce the issue in this repo

https://github.com/iroy2000/react-redux-boilerplate .

Answer 1

It turns out I need to do two things

1) postcssImport({ addDependencyTo: webpack }) need to be first in the plugin

2) I was trying to use sass @import style for my partial, but it turns out I need to include _ when I import my partials.

And this solved my issues.