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];
  }
};

index.jsx

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

main.scss

@import './style.scss';

style.scss

h1 {
  color: yellow;
}

感谢您的帮助。

- matt93

---

为什么不使用loaders: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']呢？ - Juho Vepsäläinen

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'是问题的根源，如果我把它添加到加载器中，它就会停止工作。

- matt93