Webpack 4 以错误的顺序导入 SCSS 文件

Question

我使用 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 主题之前导入我的样式文件。而且我的样式文件没有覆盖 bootstrap.

如果可能的话，我不想在入口点导入 bootstrap.scss，因为我想使用变量来覆盖 bootstrap。

在这里，我的 SCSS 文件的 webpack 配置：

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

我发现了我的问题。 Webpack 之前导入 CSS 个文件，然后编译 SCSS 个文件。我将 CSS 文件重命名为 SCSS 文件。并且有效！

Webpack 4 以错误的顺序导入 SCSS 文件

Webpack 4 import SCSS file in bad order

css

sass

webpack

webpack-4

mini-css-extract-plugin