Webpack 4 import SCSS file in bad order

Question

I use Webpack 4.35.3 to compile my assets.

I've an application.js file who's my entry point:

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

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

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

I've an application.scss file who's my file to import SCSS/CSS files:

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

The problem is Webpack import my styles file before bootstrap theme. And my styles file doesn't override bootstrap.

I don't want import bootstrap.scss in entry point if possible because I want use variables to override bootstrap.

Here, my webpack config for SCSS files:

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

Answer 1

I found my problem. Webpack import CSS files before and compile SCSS after. I renamed my CSS file to SCSS file. And it works!