Extract-text-webpack-plugin - extracting scss does not display in main.css.map

Question

I managed to extract 2 scss files into 1 css file, but I noticed that the source and mappings main.css.mapare empty:

{"version":3,"sources":[],"names":[],"mappings":"","file":"./main.css","sourceRoot":""}

My webpack.config.js:

var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    devtool: 'source-map',
    module:  {
        loaders: [
                {test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000'},
                { 
                    test:   /\.scss$/,
                    loader: ExtractTextPlugin.extract(['css', 'sass'])
                }
            }
        ]
    },

    entry:   [
        './static/js/app.js'
    ],

    output:  {
        filename: './static/js/bundle.js'
    },

    watch:   false,

    plugins: [
        new ExtractTextPlugin("./main.css")
    ]
};

My app.js:

var $ = require('jquery');
window.jQuery = $;
window.$ = $;
require('bootstrap-loader');

module.exports = (function () {
    alert('IT WORKS!');
});

window.app = module.exports;

require('./../css/main.scss');
require('./../css/main2.scss');

webpack terminal output:

Hash: 28bc2c1ea9d333be2975
Version: webpack 1.13.3
Time: 3500ms
                               Asset      Size  Chunks             Chunk Names
89889688147bd7575d6327160d64e760.svg    109 kB          [emitted]
               ./static/js/bundle.js    666 kB       0  [emitted]  main
                          ./main.css    126 kB       0  [emitted]  main
           ./static/js/bundle.js.map    813 kB       0  [emitted]  main
                      ./main.css.map  87 bytes       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
   [1] ./static/js/app.js 287 bytes {0} [built]
    + 29 hidden modules
Child extract-text-webpack-plugin:
        + 4 hidden modules
Child extract-text-webpack-plugin:
        + 4 hidden modules

As you can see, it is main.cssgenerated along with main.map.css, but at the moment it is pretty useless, because there is no display inside.

Answer 1

, , . css , -, webpack, , , .

, devtools: 'source-map', :

{ 
    test:   /\.scss$/,
    loader: ExtractTextPlugin.extract(['css', 'sass'])
}

{
    test:   /\.scss$/,
    loader: ExtractTextPlugin.extract(['css-loader?sourceMap', 'sass-loader?sourceMap'])
}

, css Dev Tools, scss.