How to make webpack, sass and source maps go along in a multi page app?

Question

Here's where I'm now:

package.json:

{
  "dependencies": {
    "css-loader": "^0.26.0",
    "html-webpack-plugin": "^2.24.1",
    "node-sass": "^3.13.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3"
  }
}

webpack.config.js:

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './1.js',
    output: {
        path: 'dist',
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            {test: /\.sass$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']},
        ]
    },
    plugins: [
        new HtmlWebpackPlugin,
    ],
};

1.js:

require('./1.sass');

1.sass:

body
    background: #ddd

Then

$ rm -f dist/* && ./node_modules/.bin/webpack

And open http://example.com/dist in Chrome. Then open Developer Tools > Sources > top > webpack:// > . > 1.sass. And there you'll see css code, not sass code. devtool is for js/coffeescript/whatever, if anything. What am I doing wrong?

UPD

From what I can see, sass-loader passes file as a string. And in that case node-sass (libsass) doesn't return source map. But even if given file, the latter returns source map with generated css code, not sass code for some reason. Any workarounds are welcome, even if ugly.

Answer 1

Well, the issue with libsass not generating source maps for inline content seems to be taken care of. It's just that libsass returns source maps with scss code, even if given sass code. So I mistook it for css.