Webpack 4 импортирует файл SCSS в неправильном порядке

Я использую Webpack 4.35.3 для компиляции своих ресурсов.

У меня есть файл application.js, который является моей точкой входа:

import $ from 'jquery';
window.$ = window.jQuery = $;

import 'popper.js';
import 'bootstrap';

import '../stylesheets/application.scss';

У меня есть файл application.scss, который является моим файлом для импорта файлов SCSS / CSS:

@import 'bootstrap/scss/bootstrap.scss';
@import './styles.css';

Проблема в том, что Webpack импортирует мой файл стилей перед темой начальной загрузки. И мой файл стилей не отменяет загрузку.

Я не хочу импортировать bootstrap.scss в точку входа, если это возможно, потому что я хочу использовать переменные для переопределения начальной загрузки.

Вот моя конфигурация веб-пакета для файлов SCSS:

module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: process.env.NODE_ENV === 'development',
                        },
                    },
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            }
        ]
    }