title: Webpack HotModuleReplacement css
body: <p>I am trying to use webpack as a replacement for gulp and livereload workflow. I have set up HotModuleReplacement Plugin and it works correctly for JS files but I can't get it to work with SCSS files. It is compiling the SCSS to CSS properly but I have to manually refresh the browser each time to get the style changes to show. I am thinking it maybe a mistake in how I have the config set up or something like that.</p>
  
  <p>I have this server.js file that is running things:</p>
  
  <pre><code>var webpack = require('webpack');
  var WebpackDevServer = require('webpack-dev-server');
  var config = require('./webpack.config');
  
  new WebpackDevServer(webpack(config), {
      publicPath: config.output.publicPath,
      hot: true,
      historyApiFallback: true,
      noInfo: true,   
      stats: { colors: true }
  }).listen(3000, 'localhost', function (err, result) {
      if (err) {
      console.log(err);
      }
  
      console.log('Listening at localhost:3000');
  });
  </code></pre>
  
  <p>and this webpack.config.js</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  var cssLoaders = ['css-loader'];
  var jsLoaders = ['react-hot', 'babel'];
  var scssLoaders = cssLoaders.slice(0);
  scssLoaders.push('sass-loader?includePaths[]=' + path.resolve(__dirname, './styles'));
  
  module.exports = {
  
    devtool: 'sourcemap',
    entry: [
      'webpack-dev-server/client?http://localhost:3000',
      'webpack/hot/only-dev-server',
      './scripts/index'
    ],
    output: {
      path: path.join(__dirname, './build'),
      filename: 'bundle.js',
      publicPath: '/build/'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
      new ExtractTextPlugin('styles.css')
    ],
    resolve: {
      extensions: ['', '.js', '.jsx', '.scss']
    },
    module: {
      loaders: [
        { test: /\.js?$/, loaders: jsLoaders, include: path.join(__dirname, 'scripts'), exclude: /node_modules/},
        { test: /\.css$/ ,loader: ExtractTextPlugin.extract('style-loader', cssLoaders.join('!')) },
        { test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/ },
        { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', scssLoaders.join('!')) }
      ]
    }
  };
  </code></pre>
  
  <p>In one of my js files I just have a call to the SCSS file like this:</p>
  
  <pre><code>require('../styles/app');
  </code></pre>
  
  <p>I have looked into the docs for this and there are some instructions that suggest that you need to manually opt in for each module but I am not sure why that is, where to add that code etc
  What I am trying to do seems like a pretty straight forward use case so is this supported or will I still also have to use gulp and live reload just for styles?</p>