Webpack Encore：意外的 SCSS 导入顺序答案

【问题标题】：Webpack Encore: unexpected SCSS import orderWebpack Encore：意外的 SCSS 导入顺序
【发布时间】：2019-03-27 06:47:09
【问题描述】：

我使用 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）

【问题讨论】：

标签： css webpack sass

【解决方案1】：

对不起，这个快速的自我回答，我真的花了很多时间才问，但在它很快找到解决方案之后。希望，可以节省smb的时间。

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

app.js

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

【讨论】：