Webpack @import order (scss, css) is not kept

Question

Current Result

1. SimpleBar
2. Bootstrap
3. Main

Desired Result

1. Bootstrap
2. SimpleBar
3. Main

It seems that the ".css" files are bundled first.

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: './src/scripts/app.js',
    output: {
        filename: 'scripts/app.js'
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'styles/app.css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(css|scss)$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    'autoprefixer'
                                ]
                            },
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'resolve-url-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(eot|otf|svg|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'fonts',
                            publicPath: '../fonts'
                        }
                    }
                ]
            }
        ]
    },
    watch: true
};

src/scripts/app.js

import '../styles/app.scss';

src/styles/app.scss

@import '~bootstrap/scss/bootstrap';
@import '~simplebar/dist/simplebar.css';
@import 'main';

Please note that "SimpleBar" doesn't come with a ".scss" file which will fix the problem. I also don't want to rename the ".css" file from the "node_modules" directory.

  "devDependencies": {
    "autoprefixer": "^9.8.6",
    "css-loader": "^4.3.0",
    "file-loader": "^6.1.0",
    "mini-css-extract-plugin": "^0.11.1",
    "postcss": "^7.0.32",
    "postcss-loader": "^4.0.1",
    "resolve-url-loader": "^3.1.1",
    "sass": "^1.26.10",
    "sass-loader": "^10.0.2",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }

#1 Solution (I don't really like it)

src/scripts/app.js

import '../styles/vendor.scss'; // Bootstrap and other goodies
import 'simplebar/dist/simplebar.css';
import '../styles/main.scss';