Webpack，“热重载”或“实时重载”sass？

Question

有没有办法让webpack“重新编译”sass并动态重新加载页面？

我一直在寻找，但还没有找到一个例子。

这就是我所拥有的：

我的文件夹结构

-app
---public
------dist
---------index.html
---------sass
------------webpack.scss

看起来我的sass只在我运行webpack时重新编译，但在运行webpack-dev-server

时它不会重新编译

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');

module.exports = {
  entry: {
    app: './app/main.js',
    //All 3rd party source
    vendor: ['react', 'redux', 'lodash']
  },
  output: {
    path: path.join(__dirname, 'app', 'public', 'dist'),
    publicPath: '/app/public/dist/',
    filename: 'app.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
      { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.css/, loader: ExtractTextPlugin.extract('css') },
      { test: /\.scss$/, loader: ExtractTextPlugin.extract('!css!sass?sourceMap') }
    ]
  },
  sassLoader: {
    includePaths: [ path.resolve(__dirname, './app/public/sass/')]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),
    new ExtractTextPlugin('./css/style.css',{
            allChunks: true
        })
  ],
  debug: true,
  //watch: true
};