Webpack source-map does not resolve sass imports

Question

I have webpack configured to transpile scss -> css, but sourcemap generated by webpack does not resolve scss @imports.

webpack.config.js:

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

const outputPath = path.join(__dirname, 'dist');

module.exports = {
    devtool: 'source-map',
    entry: ['./src/main.scss'],
    target: 'web',
    output: {
        filename: 'js/[name].bundle.js',
        path: outputPath
    },
    module: {
        rules: [
            { // sass / scss loader for webpack
                test: /\.(sass|scss)$/,
                loader: ExtractTextPlugin.extract([
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                            import: true,
                            minimize: true,
                            sourceMap: true,
                        }
                    },
                    'sass-loader'
                ])
            },
        ]
    },
    plugins: [
        new ExtractTextPlugin({ // define where to save the file
            filename: 'css/[name].bundle.css',
            allChunks: true,
        })
    ]
};

main.scss:

@import 'foo';

_foo.scss:

h1 { color: red; }

However, in Chrome dev tools, I see a reference to main.scss where I expect reference to _foo.scss - see the screenshot below:

Compiled demo: http://store.amniverse.net/webpacktest/

Answer 1

You have sass-loader there, switch it with:

{
   loader: 'sass-loader',
   options: {
     sourceMap: true
   }
}

And that would work.