title: Configuration for enabling hot style-loader in Webpack for syncing css
body: <p>I'm trying to enable hot style-loader in Webpack but I can not find the right configuration for it. Here's my webpack.config.js:</p>
  
  <pre><code>const webpack = require('webpack');
  const path = require('path');
  const buildPath = path.resolve(__dirname, 'build');
  const nodeModulesPath = path.resolve(__dirname, 'node_modules');
  const TransferWebpackPlugin = require('transfer-webpack-plugin');
  
  const config = {
      entry: [
          'webpack/hot/dev-server',
          'webpack/hot/only-dev-server',
          path.join(__dirname, '/src/app/app.js'),
      ],
      resolve: {
          extensions: ["", ".js"],
      },
      devServer: {
          contentBase: 'src/www',
          devtool: 'eval',
          hot: true,
          inline: true,
          port: 3232,
          host: '0.0.0.0',
      },
      devtool: 'eval',
      output: {
          path: buildPath,
          filename: 'app.js',
      },
      plugins: [
          new webpack.HotModuleReplacementPlugin(),
          new TransferWebpackPlugin(
              [{ from: 'www' }],
              path.resolve(__dirname, "src")
          ),
      ],
      module: {
          loaders: [
              {
                  test: /\.js$/,
                  loaders: ['react-hot', 'babel-loader'],
                  exclude: [nodeModulesPath],
              },
              {
                  test: /\.css$/,
                  loader: "style!css",
              },
          ],
      },
      eslint: {
          configFile: '.eslintrc',
      },
  };
  
  module.exports = config;
  </code></pre>
  
  <p>And my package.js file:</p>
  
  <pre><code>{
    "name": "test-material-ui",
    "version": "0.0.0-beta.1",
    "description": "Sample project that uses material-ui",
    "scripts": {
      "start": "webpack-dev-server --config webpack.config.js --progress --inline --colors",
      "build": "webpack -p --define process.env.NODE_ENV='\"production\"' --config webpack-production.config.js --progress --colors",
      "lint": "eslint src &amp;&amp; echo \"eslint: no lint errors\""
    },
    "private": true,
    "devDependencies": {
      "babel-core": "^6.3.26",
      "babel-eslint": "^6.0.0",
      "babel-loader": "^6.2.4",
      "babel-preset-es2015": "^6.3.13",
      "babel-preset-react": "^6.3.13",
      "copy-webpack-plugin": "^2.1.3",
      "css-loader": "^0.23.1",
      "eslint": "^2.5.1",
      "eslint-plugin-react": "^4.0.0",
      "html-webpack-plugin": "^2.7.2",
      "react-hot-loader": "^1.3.0",
      "style-loader": "^0.13.1",
      "transfer-webpack-plugin": "^0.1.4",
      "webpack": "^1.12.9",
      "webpack-dev-server": "^1.14.0"
    },
    "dependencies": {
      "flexboxgrid": "^6.3.0",
      "material-ui": "^0.15.0-beta.1",
      "react": "^15.0.1",
      "react-addons-css-transition-group": "^15.0.1",
      "react-dom": "^15.0.1",
      "react-redux": "^4.4.5",
      "react-tap-event-plugin": "^1.0.0",
      "redux": "^3.4.0"
    }
  }
  </code></pre>
  
  <p>But no matter how I configure it, I can not get the hot sync working (for .css, for .js files it works just fine)! Can someone please show me the right way to do so?</p>