Question

我使用Symfony + Webpack Encore，尝试将样式分为“布局”和“基于页面”，但只是为了使开发更舒适：我仍然想为其编译一个css文件（实际上，有一个这样的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

在编译期间（仅在我的app.js中为require('../css/app.scss');），样式是有序的：[全局，引导程序，应用程序]，我不明白为什么。我的意思是，如果您将它们用作：

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

容器的填充将覆盖my-style1中定义的

。

最奇怪的是，它们在dev app.css中按预期顺序进行排序（我的风格低于容器），而在生产产品中却没有按顺序排序（容器低于我的风格）。当您从事开发工作时（Chrome显示非编译样式时，您还会看到_grid.scss会覆盖_global.scss）

Answer 1

抱歉，我很快就花了很多时间问这个问题，但很快就找到了解决方案。希望可以节省smb的时间。

您应该简单地向app.js添加其他样式。这样，它们将在文件更改时重新编译（在上一示例中，它们仅在app.scss更改时才重新编译），并且顺序将正确：

app.js

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

Webpack Encore：意外的SCSS导入顺序

1 个答案: