Webpack Encore: неожиданный порядок импорта SCSS

Question

Я использую Symfony + Webpack Encore и пытаюсь разделить стили на «макет» и «на основе страниц», но только для того, чтобы сделать разработку более удобной: я все еще хочу скомпилировать для них один файл CSS (на самом деле, есть ограниченное количество таких CSS-файлов, каждый для блока страниц, но для более простого понимания, давайте предположим, что необходим только один). Вот и я так:

_global.scss

// ... bootstrap variables redefenition here

@import "~bootstrap/scss/bootstrap";

// ... common functions, mixins, font-face definitions here

.my_style1 {
    padding-left: 12px;
    padding-right: 12px;
}

.my_style2 {
    @include make-container-max-widths();
}

app.css

@import "_global"

// other styles here

Во время компиляции (require('../css/app.scss'); только в моем app.js) упорядочены стили: [global, bootstrap, app], и я не понимаю, почему. Я имею в виду, если вы используете их как:

<div class="container my-style1"></div>

Заполнение контейнера будет переопределено в my-style1.

Самое странное, что в dev app.css они упорядочены в соответствии с ожиданиями (my-style ниже, чем container), но в prod нет (container ниже, чем my-style). Когда вы работаете в dev (и Chrome отображает не скомпилированные стили, вы также видите, что _grid.scss переопределяет _global.scss)

Answer 1

Извините за быстрый ответ, я действительно потратил много времени, прежде чем спрашивать, но после того, как он быстро нашел решение. Надеюсь, может сэкономить время кого-л.

Вы должны просто добавить другие стили в app.js. Таким образом, они будут перекомпилироваться при любом изменении файла (в предыдущем примере они перекомпилируются только при изменении app.scss), и порядок станет правильным:

app.js

require('_global.scss');
require('app.scss');