Блог

Я использую Symfony Webpack Encore и пытаюсь разделить стили на «layout» и «page-based», но только для того, чтобы сделать разработку более удобной: я все еще хочу скомпилировать для них один 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)

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

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

app.js

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