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

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

1 голос
/ 11 июля 2019

Я использую 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',
                ],
            }
        ]
    }

1 Ответ

0 голосов
/ 11 июля 2019

Я нашел свою проблему. Webpack импортирует CSS файлы до и компилирует SCSS после. Я переименовал свой файл CSS в файл SCSS. И это работает!

...