css - Sass 不在 webpack 元素中热重载

Question

我在我的元素中使用 webpack，目前我正在尝试设置 sass 热重载

当我运行 webpack-dev-server --inline --hot 时，我的 main.scss(导入了所有其他 css/scss)被加载并且一切正常，但是一旦我修改一些东西，它不刷新，我必须重新启动 webpack 服务器

这是我的 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];
  }
};

索引.jsx

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

主.scss

@import './style.scss';

样式.scss

h1 {
  color: yellow;
}

谢谢你的帮助

Answer 1

好的，我解决了这个问题

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 中的脚本)

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

看起来 'postcss-loader' 是问题的根源，如果我将它添加到加载器，它就会停止工作