When developing with Symfony + Webpack Encore, I aim to split styles into "layout" and "page-based" categories for convenience. However, despite this organization, I still prefer to compile all styles into a single CSS file. To achieve this, I structure my code as follows:
_global.scss
// ... redefining bootstrap variables here
@import "~bootstrap/scss/bootstrap";
// ... incorporating 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 go here
However, during compilation (using require('../css/app.scss'); exclusively in my app.js), the styles are ordered as [ global, bootstrap, app ], which is not the desired outcome. For example, if used like this:
<div class="container my-style1"></div>
The container's padding will take precedence over the styling defined in my-style1.
A peculiar observation is that the development version of app.css displays styles in the expected order, where my-style overrides container. But in the production version, the order is reversed (container overrides my-style). Additionally, while working in development mode (where non-compiled styles are displayed by Chrome), it becomes apparent that _grid.scss takes precedence over _global.scss.