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 混合:版本 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;
}

在 Dev 模式下一切正常……但在 Prod 中，一些元素继承了错误的颜色值。

Answer 1

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

.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 中的错误。或者，如果新版本修复了它 - 乍一看，它看起来像是正确的行为，但边界的情况并没有那么多。