我跟着this guide做HMR工作.它涉及到一个BrowserSync设置,以便在Webpack将其写入磁盘后更新css文件.

我使用(由react-css-modules建议)ExtractTextPlugin提取所有的CSS：

{
    test: /\.scss$/,loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
}

但是如果我将这个更改为sourcemaps,如here所示

loader: ExtractTextPlugin.extract('style','css?sourceMap!sass-loader outputStyle=expanded&sourceMap=true&sourceMapContents=true')

我得到错误：“根”CSS模块未定义.在我的浏览器控制台.

您可以找到我的示例repo here,但这是我用于开发的完整webpack配置.

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WriteFilePlugin = require('write-file-webpack-plugin').default;

module.exports = {
  entry: {
    bundle: [
      'webpack/hot/dev-server','webpack-hot-middleware/client','./index.js'
    ]
  },devtool: 'cheap-module-source-map',debug: true,devServer: devServer,context: path.resolve(__dirname,'./src'),output: {
    path: path.resolve(__dirname,'./builds'),filename: '[name].js',publicPath: '/builds/'
  },plugins: [
    new webpack.HotModuleReplacementPlugin(),new webpack.OldWatchingPlugin(),new WriteFilePlugin(),new ExtractTextPlugin('[name].css',{
      allChunks: true
    })
  ],module: {
    loaders: [
      {
        test: /\.js$/,loaders: ['react-hot','babel-loader'],exclude: /node_modules/
      },{
        test: /\.scss$/,'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
      }
    ]
  },resolve: {
    extensions: ['','.js','.json']
  }
};

如何使sourcemap工作？