css - Webpack Encore : unexpected SCSS import order

Question

我使用 Symfony + Webpack Encore 并尝试将样式拆分为“布局”和“基于页面”，但只是为了让开发更舒适:我仍然想为它们编译一个 css 文件(实际上，有一个此类 css 文件的数量有限，每个用于页面 block ，但为了更容易理解，我们假设只需要一个)。所以我喜欢这样:

_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

很抱歉这么快的 self 回答，我真的花了很多时间才问，但很快就找到了解决方案。希望，可以节省smb的时间。

您应该简单地向 app.js 添加其他样式。这样他们将在任何文件更改时重新编译(在前面的示例中，他们仅在 app.scss 更改时重新编译)并且顺序将变得正确:

app.js

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