webpack中启用sourcemap后，浏览器中的scss内容仍是转换后的css内容

Question

是在webpack-dev-server中使用，
使用了html-webpack-plugin
使用了extract-text-webpack-plugin
devtool是'source-map',
配置如下：

module: {
            loaders: [
                {
                    test: /\.(css|scss)$/,
                    loader: ExtractTextPlugin.extract(['css?sourceMap','sass']),
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin('./build/css/[name].css')，
 
            new HtmlWebpackPlugin({
                template: require('html-webpack-template'),
                title: 'demo',
                appMountId: 'app'
                inject: false
            })
        ]

最终浏览器中的css文件内容 和scss文件内容是一样的：

比如：
style.css

h1 {
  color: moccasin; }

.asd {
  color: #0000FF; }
  .asd h1 {
    color: #006600; }
  .asd .vbg {
    color: aqua;
    font-size: 20px; }

/*# sourceMappingURL=style.css.map*/

main.scss

h1 {
  color: moccasin; }

.asd {
  color: #0000FF; }
  .asd h1 {
    color: #006600; }
  .asd .vbg {
    color: aqua;
    font-size: 20px; }



/** WEBPACK FOOTER **
 ** webpack:///src/scss/main.scss
 **/

求大神解释导致这种情况的可能原因。感激不尽！！！

Answer 1

先不说别的，看sass-loader的文档，它是这样写的
['css?sourceMap','sass?sourceMap']

Source maps

To enable CSS Source maps, you'll need to pass the sourceMap-option to
the sass- and the css-loader. Your webpack.config.js should look like
this:

module.exports = {
    ...
    devtool: "source-map", // or "inline-source-map"
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loaders: ["style", "css?sourceMap", "sass?sourceMap"]
            }
        ]
    }
};

Answer 2

ExtractTextPlugin配错了
常见写法

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]
}

或者

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

// multiple extract instances
let extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
let extractLESS = new ExtractTextPlugin('stylesheets/[name].less');

module.exports = {
  ...
  module: {
    loaders: [
      {test: /\.scss$/i, loader: extractCSS.extract(['css','sass'])},
      {test: /\.less$/i, loader: extractLESS.extract(['css','less'])},
      ...
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

参考https://github.com/webpack/extract-text-webpack-plugin