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

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

这里是我在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加载程序：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中，某些元素继承了错误的颜色值。

因此，您试图输出的特定CSS非常关键。从你的私人信息中，我发现这与边界有关，你的原始代码是：

.selector-1{
边框顶部宽度：2px；
边框顶部样式：实心；
边框颜色：获取颜色（基础、主体）；
}

在编译为的生产模式下

.selector-1{
边框颜色：var（--颜色基体）
}
.选择器-1{
边框顶部：2倍实心；
}

问题是，如果这些

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

.selector-1{
边框：2倍纯色（底座、主体）；
边框宽度：2px0；
}

这相当于

.u-border-top-2{
边框：实体变量（--颜色基体）；
边框宽度：2px0；
}

…在浏览器中正确渲染

我不确定这是
sass-loader
中的一个bug，还是一个新版本修复了它——乍一看，它看起来是正确的行为，但边界的情况并不如此