Объединение SCSS и CSS в один файл с помощью WebPack

Я новичок в webpack, и мне трудно понять, как я могу взять кучу scss-файлов и css-файлов и объединить их вместе с webpack (после транспонирования sass, конечно).

С gulp, это было действительно очевидно, как я могу иметь 1 шаг транспилировать sass в css, а затем шаг после этого, чтобы объединить их вместе. Однако с webpack, похоже, все происходит одновременно.

Это довольно основное требование, которое, я уверен, имеет очевидный смысл. ответьте тем, кто более опытен.

Я дошел до того, что могу успешно вывести транспилированный scss в css и отдельно вывести файл css из CSS input, но я не могу понять, как склеить их вместе с помощью webpack.

Ниже мой webpack.конфиг.файл js:

const path = require('path');
const webpack = require('webpack');

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

const extractCSS = new ExtractTextPlugin('extractedCSS.css');

const extractSass = new ExtractTextPlugin({
    filename: "extractedSASS.css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = function (env) {
    return {
        context: path.resolve(__dirname, './wwwroot/app'),
        entry: {
            main: './index.js',
            vendor: 'moment'
        },
        output: {
            filename: '[name].[chunkhash].js',
            path: path.resolve(__dirname, './wwwroot/mytempdist')
        },
        module: {
            rules: [{
                test: /.css$/,
                use: extractCSS.extract({
                    use: 'css-loader'
                })
            },
            {
                test: /.scss$/,
                use: extractSass.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            }
            ]
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                minChunks: function (module) {
                    // this assumes your vendor imports exist in the node_modules directory
                    return module.context && module.context.indexOf('node_modules') !== -1;
                }
            }),
            //CommonChunksPlugin will now extract all the common modules from vendor and main bundles
            new webpack.optimize.CommonsChunkPlugin({
                name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
            }),
            //new webpack.optimize.UglifyJsPlugin({
            //    sourceMap: options.devtool && (options.devtool.indexOf("sourcemap") >= 0 || options.devtool.indexOf("source-map") >= 0)
            //}),
            extractSass,
            extractCSS
        ],
        devtool: 'inline-source-map'
    }
}

Как я могу изменить вышесказанное, чтобы и sass, и css вошли в выходной файл css?

Если это имеет значение, ниже приводится выдержка из моего индекса.JS файл (точка входа) toastr-это пакет npm, а pace - это просто обычный загруженный css-файл:

var toastr = require('toastr');
import 'toastr/toastr.scss';

import pace from './../lib/pace/pace.min.js';
import './../lib/pace/pace.css';