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

我认为这可能会因为var()中引入--sg-card-produto-hover-border-color而发生。

修改

看起来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）