title: Webpack and Precss not reloading on @import file change
body: <p>I am setting up a basic Webpack installation and want to have automatic browser reloading of preprocessed CSS in @imported files using <a href="https://github.com/postcss/postcss" rel="nofollow">PostCSS</a> and the <a href="https://github.com/jonathantneal/precss" rel="nofollow">PreCSS</a> plugin. At present if I modify and save an @imported file the browser does not refresh (body.css in below example). If I then save the root referenced CSS file (styles.css) then the browser refreshes and also reflects any changes made to the @imported file.</p>
  
  <p>I have tried with using the configurable webpack-dev-server, and using a server.js. I have tried without and with hot model reloading (HMR) installed.</p>
  
  <p>Is there a way to have webpack watch @imported CSS files, or am I fundamentally missing something here?</p>
  
  <p><strong>package.json</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>"dependencies": {
    "react": "^0.14.0",
    "react-dom": "^0.14.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "postcss-loader": "^0.8.0",
    "postcss-scss": "^0.1.3",
    "precss": "^1.4.0",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
    "start": "node server.js",
    "start-dev-server": "webpack-dev-server 'webpack-dev-server/client?/' --host 0.0.0.0 --port 9090 --progress --colors",
    "build": "echo \"Build hasn't been specified yet\" &amp;&amp; exit 1"
  },
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>/*global require module __dirname*/
  var path = require('path'),
      webpack = require('webpack'),
      ExtractTextPlugin = require('extract-text-webpack-plugin'),
      autoprefixer = require('autoprefixer'),
      precss = require('precss');
  
  module.exports = {
      entry: [
      'webpack-dev-server/client?http://localhost:9090',
      'webpack/hot/only-dev-server',
      './entry.js'
    ],
      output: {
          path: path.join(__dirname, 'dist'),
          filename: 'bundle.js',
          publicPath: '/static/'
      },
      devtool: 'source-map',
      module: {
          loaders: [
              { 
                  test: /\.css$/i,
                  loaders: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&amp;modules&amp;importLoaders=1!postcss-loader')
              }
          ]
      },
      postcss: function() {
          return [precss, autoprefixer];
      },
      plugins: [
          // Set the name of the single CSS file here.
          new ExtractTextPlugin('main.css', { allChunks: true }),
          new webpack.HotModuleReplacementPlugin()
      ]
  };
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;link rel="stylesheet" type="text/css" href="/static/main.css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script src="http://localhost:9090/webpack-dev-server.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/static/bundle.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>entry.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>require("./styles.css");
  document.write(require("./content.js"));
  </code></pre>
  
  <p><strong>styles.css</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>@import "body.css";
  
  body {
       /*background: yellow; */
      font-size: 30px;
  }
  
  div {
      display: flex;
  }
  </code></pre>
  
  <p><strong>body.css</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>$color: yellow;
  
  body {
      background: $color;
  }
  
  div {
      color: white;
  
      a {
          color: green;
      }
  }
  
  div {
      display: flex;
  }
  </code></pre>