Css Web包项目中的Sass未热重新加载

我正在我的项目中使用webpack，目前我正在尝试设置sass热重新加载

当我运行webpack dev server--inline--hot时，我的main.scs（导入所有其他css/scs的地方）被加载，一切正常，但一旦我修改了某些内容，它就不会刷新，我必须重新启动webpack server

这是我的webpack.config.js

module.exports = {
  entry: JS_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    publicPath: '/public/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './src/client',
    inline: true,
    hot: true,
    port: 8080
  },
  module: {
    loaders: [{
      test: /\.jsx?/,
      include: JS_DIR,
      loader: 'babel',
    }, {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'postcss-loader']
    }]
  },
  resolve: {
    root: path.resolve(CLIENT_DIR),
    extensions: ['', '.js', '.jsx']
  },
  postcss: function() {
    return [autoprefixer, precss];
  }
};

index.jsx

import style from 'css/main.scss';
...

main.scss

@import './style.scss';

style.scss

h1 {
  color: yellow;
}

谢谢你的帮助好的，我解决了这个问题

webpack.config.js现在看起来像这样：

module.exports = {
  entry: JS_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    publicPath: '/public/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './src/client',
    inline: true,
    hot: true,
    port: 8080
  },
  module: {
    loaders: [{
      test: /\.jsx?/,
      include: JS_DIR,
      loader: 'babel',
    }, {
      test: /\.scss$/,
      loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
    }]
  },
  resolve: {
    root: path.resolve(CLIENT_DIR),
    extensions: ['', '.js', '.jsx']
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
};

它使用npm start运行正常（脚本位于package.json中）

---

看起来问题的根源是

'postss-loader'

，如果我将它添加到加载程序中，它将停止工作

为什么不使用

加载程序：['style-loader'，'css loader'，'sass loader'，'postss loader']

？

...
"scripts": {
  "start": "webpack-dev-server"
},
...