How to make source-maps show source files when building with webpack, and not merge everything into one SCSS?

Question

Sass

in the main scss file I import all sorts of different types

@import "partials/_variables";
@import "~bootstrap/scss/bootstrap";
// кастомные стили

but in the end it turns out that in sourcemaps everything is shown dumped into one theme.scss file there
is no splitting into files as in the original
, what could be the problem?

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");

var browserSync = require("browser-sync").create();
let publicPath = path.resolve(__dirname, '../');

let config = {
    devtool: 'source-map',
    entry: {
        main: [
            './js/theme.js',
            './css/theme.scss'
        ]
    },
    output: {
        path: path.resolve(__dirname, '../assets/js'),
        filename: 'theme.js'
    },
    module: {
        rules: [
            {
                test: /\.js/,
                loader: 'babel-loader',
                options: {
                    sourceMap: false
                }
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: false,
                                sourceMap: true
                            }
                        },
                        'postcss-loader',
                        'sass-loader'
                    ]
                })
            },
            {
                test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '../css/[hash].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            }
        ]
    },
    externals: {
        prestashop: 'prestashop',
        $: '$',
        jquery: 'jQuery'
    },
    plugins: [
        new ExtractTextPlugin({
            filename: path.join('..', 'css', 'theme.css'),
            disable: false,
            allChunks: true,
        }),
        new HardSourceWebpackPlugin()
    ]
};

module.exports = config;
browserSync.init({
    files: [
        path.resolve(__dirname, "../assets/css/theme.css")
    ],
    proxy: "http://sweet.wp4",
    overlay: true,
});

Answer 1

Well, in theory, instead of 'sass-loader'
writing like this

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