Как сделать чтобы при сборке вебпаком в source-maps показывались файлы источники, а не сливалось все в один SCSS?

Question

[Александр]

в главном scss файле импортирую всякое разное типа

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

но в итоге получается что в соурсмапах показывается все сваленным в один файл theme.scss
нет разбиения по файлам как в оригинале
в чем может быть проблема?

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

[Александр Ме]

Ну по идее вместо 'sass-loader'
написать так

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

Comments

[Александр]

Спасибо, но к сожаленю ничего не меняется

{
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: false,
                                sourceMap: true
                            }
                        },
                        'postcss-loader',
                        {
                            loader: 'sass-loader',
                            options: {sourceMap: true}
                        }
                        // 'sass-loader'
                    ]
                })
            },

все также сливается в один файл и нет разделения по отдельным scss

[Александр Ме]

Александр, ты как то странно тестируешь...
postcss-loader тоже должен отдавать sourceMap. Там алерт специально для тебя)