Laravel mix - 更改生产 CSS 输出选项

Question

我正在尝试更改 webpack.mix.js 中的 CSS 输出样式，但它似乎只影响开发版本。如何将 outpoutStyle 选项应用于生产版本？

这里是我在 webpack.mix.js 文件中的代码，更改“outputstyle”的值只会影响开发版本。

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css', {
        outputStyle : 'expanded'
    })
    .copy(`resources/images`, `public/images`, false);

laravel-mix:版本 5.0.4

sass-loader:版本7.1.0

编辑 - 附加信息:

我试图解决的问题是，我的代码在开发人员构建中运行良好，但在运行生产构建时却变得梨形。我怀疑这与生产构建的方式有关:

.selector-1 {
    background-color: green;
    color: red;
}

.selector-2 {
    background-color: blue;
    color: red;
}

并将其编译为:

.selector-1 {
    background-color: green;
}

.selector-1, .selector-2 {
     color: red;
}

.selector-2 {
    background-color: blue;
}

就我而言，这是不良行为，我相信它会导致我的 CSS 自定义属性出现范围问题。编译后的代码有数千行长，因此我无法查明确切的问题 - 但我注意到开发版本并没有这样做，并且一切正常。

基本上，我有这样的东西，我用它来设置主题:

:root {
 —theme-base: red;
}

.theme-green {
 —theme-base: green;
}

在开发模式下一切正常……但在产品模式下，某些元素继承了错误的颜色值。

Answer 1

事实证明，您尝试输出的特定 CSS 非常关键。从你的私信中我发现它与边框有关，你的原始代码是这样的:

.selector-1 {
  border-top-width: 2px;
  border-top-style: solid;
  border-color: get-color(base, body);
}

在生产模式下编译为

.selector-1 {
  border-color: var(--color-base-body)
}

.selector-1 {
  border-top: 2px solid;
}

问题是，如果这些 border 属性位于不同的类选择器中，即使它们相同，浏览器也不知道如何处理它。我们需要一种方法将所有相关的边框属性包含在一个选择器中。就像这样:

.selector-1 {
  border: 2px solid get-color(base, body);
  border-width: 2px 0 0;
}

编译为

.u-border-top-2 {
  border: solid var(--color-base-body);
  border-width: 2px 0 0;
}

...在浏览器中正确呈现。

我不确定这是否是 sass-loader 中的错误，或者新版本是否修复了它 - 乍一看，它看起来像是正确的行为，但边框的情况并不那么严重。