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;
}

在开发模式…中一切工作正常但是在Prod中，一些元素继承了错误的颜色值。

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;
}

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

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