Laravel 混合 - 更改制作 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-加载程序：版本 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 非常关键。私信你发现是关于边框的，你的原码是这样的：

.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 属性位于不同的 class 选择器中，即使它们相同，浏览器也不知道如何处理它。我们需要一种方法在一个选择器中拥有所有相关的边框属性。像这样：

.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 中的错误还是新版本修复了它 - 乍一看它看起来像是正确的行为，但边框的情况并不多。

Laravel 混合 - 更改制作 CSS 输出选项

Laravel mix - Change production CSS output options

laravel

sass-loader

laravel-mix