Webpack не может извлечь файл boostrap.css с помощью плагина min-css-extract

Question

У меня есть приложение реагирования, которое я пытаюсь извлечь css в отдельные файлы, но у меня есть некоторые проблемы здесь. Я подаю в суд на MiniCssExtractPlugin за это. Моя текущая конфигурация веб-пакета, включенная ниже, работает нормально, когда я включаю свои собственные файлы css, но не получается, когда я включаю свой bootstrap.css из node_modules.

index.js

import React from 'react'
import ReactDOM from 'react-dom'

import MyApp from './scenes/MyApp/MyApp'
import 'bootstrap/dist/css/bootstrap.css'
import './index.css'
import './assets/stylesheets/scenes.scss'

ReactDOM.render(<MyApp />, document.getElementById('root'))

webpack.config.js

    const appConstants = function() {
    switch (process.env.NODE_ENV) {
        case 'local':
            const localConfig = require('./config/local');
            return localConfig.config();
        case 'development':
            const devConfig = require('./config/development');
            return devConfig.config();
        case 'production':
        default:
            const prodConfig = require('./config/production');
            return prodConfig.config();
    }
};

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const webpack = require('webpack');

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const htmlWebpackPlugin = new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html",
    hash: true
});

let webpackConfig = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(css|scss)$/,
                exclude: [/node_modules/],
                include: [/node_modules\/bootstrap\/dist/],
                use: [
                    {
                        loader: process.env.NODE_ENV !== 'local' ? MiniCssExtractPlugin.loader : 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /\.(pdf|jpg|png|gif|svg|ico)$/,
                exclude: [/node_modules/],
                use: [
                    {
                        loader: 'file-loader'
                    },
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg|otf)$/,
                exclude: [/node_modules/],
                use: {
                    loader: 'url-loader?limit100000'
                }
            }
        ]
    },
    entry: [ "@babel/polyfill", "./src/index.js"],
    output: {
        publicPath: appConstants().DS_BASENAME ? JSON.parse(appConstants().DS_BASENAME) : '/'
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }, 
    plugins: [
        htmlWebpackPlugin,
        new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en/),
        new BundleAnalyzerPlugin({
            analyzerMode: 'disabled',
            generateStatsFile: true,
            statsOptions: { source: false }
        }),
        new webpack.DefinePlugin({
            'process.env': appConstants()
        }),
        new webpack.EnvironmentPlugin(['NODE_ENV']), 
        new MiniCssExtractPlugin({
            filename: (process.env.NODE_ENV == "local") ?  "[name].css" : "[name].[hash].css",
            chunkFilename: (process.env.NODE_ENV == "local") ?  "[id].css" : "[id].[hash].css"
        }),
        new OptimizeCSSAssetsPlugin()
    ],
    devServer: {
        historyApiFallback: true,
        port: 9090
    },
    watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
    }
};

// configure source map per-env
if (process.env.NODE_ENV === 'local') {
    webpackConfig.devtool = 'eval-source-map';
} else {
    webpackConfig.devtool = 'hidden-source-map';
}

module.exports = webpackConfig;

Вот ошибка, которую я получаю при сборке:

ОШИБКА в ./node_modules/bootstrap/dist/css/bootstrap.css 7: 0 Ошибка разбора модуля: неожиданный токен (7: 0) Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов. | * Лицензировано под MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | * / : root { | - синий: # 007bff; | --indigo: # 6610f2;

Эта ошибка заставляет меня думать, что мне не хватает подходящего загрузчика, но я не знаю, какой другой загрузчик мне понадобится для этого.

TL; DR Я хочу извлечь все мои css-файлы, включая bootstrap.css, в отдельный файл из моего main.js.