1

我使用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 文件的 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',
                ],
            }
        ]
    }
4

1 回答 1

1

我发现了我的问题。Webpack 先导入 CSS 文件，后编译 SCSS。我将我的 CSS 文件重命名为 SCSS 文件。它有效！

于 2019-07-11T10:29:42.617 回答