title: Watch imported css files in webpack + postcss-loader
body: <p>I'm having a bit of trouble getting Webpack in combination with the postcss-loader to watch imported css files. They're being processed on the first run, but webpack does not recompile when I modify these files.</p>
  
  <p>E.g.</p>
  
  <p>I have my main css file where I import all css modules:</p>
  
  <pre><code>...
  /* Base imports */
  @import "base/base-imports";
  ...
  </code></pre>
  
  <p>In base imports I have for the sake of example applied a color to the body:</p>
  
  <pre><code>body {
    background: tomato;
  }
  </code></pre>
  
  <p>I now set the background to another color tho debug whether the css file is reloaded, but isn't.</p>
  
  <p>This is my webpack config:</p>
  
  <pre><code>var webpack           = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin')
  
  var autoprefixer  = require('autoprefixer');
  var precss        = require('precss');
  var fontMagician  = require('postcss-font-magician');
  var atImport      = require('postcss-import');
  
  
  
  module.exports = {
    entry: [
      './src/index.js'
    ],
    output: {
      path: __dirname + '/dist',
      publicPath: '/',
      filename: 'bundle.js',
    },
    module: {
      loaders: [
        {
          test: /\.css$/,
          loader: "style-loader!css-loader!postcss-loader"
        }
      ],
    },
    postcss: function(webpack) {
      return [
        autoprefixer({ browsers: ['last 2 versions'] }),
        precss,
        fontMagician,
        atImport({
          path: './src/styles/*.css',
          addDependencyTo: webpack
        }),
      ];
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Custom template',
        template: 'src/index.html', // Load a custom template
        inject: 'body' // Inject all scripts into the body
      })
    ],
    devtool: 'source-map',
    devServer: {
      contentBase: './dist',
      hot: true
    },
  }
  </code></pre>