Enable Hot Reloading With Webpack and PostCSS

I am looking to hot reload my window when I save a stylesheet in my text editor. Currently, I have to manually reload the page to see any changes. Below is the snippet in my Webpack configuration file that handles processing css:

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: path.resolve(__dirname, 'node_modules'),
      loader: 'babel-loader',
    },
    {
      test: /\.css$/,
      include: [`${PATHS.src}`, `${PATHS.modules}/normalize.css/normalize.css`],
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]',
              importLoaders: 1,
            },
          },
          'postcss-loader',
        ],
      }),
    },
  ],
}

I am using Webpack 3, Webpack Dev Server and PostCSS along with the Extract Text Plugin. Thanks!

To enable hot reloading for css using the ExtractTextWebpackPlugin, there are multiple steps you need to follow.

1. Configure webpack-dev-server

devServer: {
  host: '0.0.0.0',
  port: 8080,
  hot: true
}

2. Add the HotModuleReplacementPlugin

plugins: [
  new webpack.HotModuleReplacementPlugin()
]

3. Add an entrypoint for the dev server

entry: [
  'webpack-dev-server/client?http://0.0.0.0:8080',
  // your other entry points
]

4. Use css-hot-loader

Please refer to the documentation, since the first example contains ExtractTextPlugin. View it here.

5. Setup the hot-module script in your .js entrypoint

Inside your .js entry point, you should implement the following script:

if (module.hot) {
  module.hot.accept();
}

Those steps should provide you with hot reloading of both JS and CSS. Let me know, if there are any issues or questions.