AWS放大的重复线性梯度错误

Question

我开发了一个使用AWS Amplify部署的网站。我使用下面的CSS创建了一个"X“按钮：

  background: 
  repeating-linear-gradient(45deg, transparent 0% 43%, #10387d 43%  57%),
  repeating-linear-gradient(135deg, transparent 0% 43%, #10387d 43%  57%);

当我用npm运行它时，一切正常。但当我在我的域名中打开它时，我的按钮看起来像一个圆圈，而不是一个"X“。它的原因是background属性，在本例中它看起来像这样：

background:
repeating-linear-gradient(45deg,#0000 43%,#10387d 43% 57%),
repeating-linear-gradient(135deg,#0000 43%,#10387d 43% 57%)

正如你所看到的，透明现在是#0000 (这没问题)，透明之后缺少0%，当我手动将0%添加到CSS中时，它看起来应该是"X“。我知道问题^在使用AWS Amplify编译我的CSS代码后，CSS中缺少0%，我如何解决这个问题？

Answer 1

解决方案是用另一种方式编写CSS：

  background: 
  repeating-linear-gradient(45deg, transparent, transparent 0% 43%, $mainTextColor 43%  57%, transparent 57% 100%),
  repeating-linear-gradient(135deg, transparent, transparent 0% 43%, $mainTextColor 43%  57%, transparent 57% 100%);

现在它可以正常工作了

Answer 2

如果它对设计没有太大影响，只需将0%更改为1% (或0.1%，0.2%...)在你的CSS中，它应该会正确显示

 background: 
  repeating-linear-gradient(45deg, transparent 1% 43%, #10387d 43%  57%),
  repeating-linear-gradient(135deg, transparent 1% 43%, #10387d 43%  57%);