'npm run prod' 上的错误输出

Question

我有这个 sass 文件，其中包含一些我将在我的应用程序中使用的变量，并且我正在使用 Laravel Mix 来编译它们。

我将所有这些变量放在:root 中，这是该元素中唯一的样式。

这是有缺陷的部分：

--sg-card-produto-hover-bg: #c3c3c3;
--sg-card-produto-hover-box-shadow: 0 0 15px rgba(0, 0, 0, .8);
--sg-card-produto-hover-border-width: 2px;
--sg-card-produto-hover-border-style: solid;
--sg-card-produto-hover-border-color: var(--sg-cor-botao);

当我运行npm run dev 甚至npm run watch 时，它编译得很好：

但是当我运行npm run prod 时，这是我得到的结果（美化）：

为什么会这样？

我了解它采用了变量的 border-width、border-style 和 border-color 部分并将它们放入单个属性中，该属性是 border 的简化版本，但它们是变量 而不是属性！

另外，它没有混合前面代码上方部分中的变量：

--sg-card-produto-bg: #d3d3d3;
--sg-card-produto-border-width: 2px
--sg-card-produto-border-style: solid;
--sg-card-produto-border-color: #222;

我相信这可能是因为在--sg-card-produto-hover-border-color 中引入了var()。

编辑：

看起来var() 不是问题所在。我放了一个十六进制颜色并得到了相同的结果：

编辑 2：

我已将变量重命名如下：

--sg-card-produto-hover-border_style: solid;
--sg-card-produto-hover-border_width: 2px;
--sg-card-produto-hover-border_color: var(--sg-cor-botao);

但是现在，上面的变量 (--sg-card-produto-border...) 反而混淆了：

似乎唯一的最后一次出现正在被替换。

编辑 3：

我注意到它只混淆了它检测到扩展属性时的最后一次出现。

所以我使用了这个快速修复：

--sg-card-produto-bg: #d3d3d3;
--sg-card-produto-border-width: 2px;
--sg-card-produto-border-style: solid;
--sg-card-produto-border-color: #222;

--sg-card-produto-hover-bg: #c3c3c3;
--sg-card-produto-hover-box-shadow: 0 0 15px rgba(0, 0, 0, .8);
--sg-card-produto-hover-border-style: solid;
--sg-card-produto-hover-border-width: 2px;
--sg-card-produto-hover-border-color: var(--sg-cor-botao);

border-style: none;
border-width: 0;
border-color: transparent;

结果如下：

很奇怪，对吧？

Answer 1

看起来缩小器天真地将*border-* 属性转换为简写形式。您可以通过使用不同的命名方案（例如 --sg-card-produto-border-hover-color 而不是 --sg-card-produto-hover-border-color）来回避这个问题