SCSS 不透明度构建错误？答案

【问题标题】：SCSS Opacity build bug?SCSS 不透明度构建错误？
【发布时间】：2020-06-09 17:49:21
【问题描述】：

我在我的 React 应用程序的一些 SCSS 代码中使用 opacity: 100% 或 opacity: 40%。

在开发模式下找到作品。

但是当我构建时，所有元素的不透明度都设置为1%!!!

我已经通过使用 rgba 颜色并在那里设置不透明度轻松解决了这个问题。

但是，这是怎么回事？？？

【问题讨论】：

opacity 为 0 到 1 的小数，百分比一开始就无效。所以按照规格 0% = 0、100% = 1、50% = .5、25% = .25 等等。在我看来，它一开始就给你带来了超出预期的东西，当你使用适当的属性语义时，问题就消失了。 :)
他们至少应该保持一致。原因 % 在开发中有效，但在构建中无效。这有点危险:(

【解决方案1】：

不透明度不是按百分比计算的，而是按小数计算的：

在此处查看有关不透明度 css 规范的更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

【讨论】：

截至今天（2020 年 5 月 19 日），spec 表示百分比是一个可接受的单位，Chrome 在样式表中以及在调试器中更改它时会尊重这一点。只有 prod 构建会尝试转换，这令人沮丧且容易错过：/
好点@JohnNeuhaus！我确实看到支持仍然相当有限，但我不知道规范已经改变：caniuse.com/#search=opacity%20percent
是的。我只是简单地替换了我在 0 和 1 之间使用百分比到小数的所有地方，它起作用了。

【解决方案2】：

Sass 永远不会根据属性名称更改属性值（请参阅this example）。我猜你也在使用 cssnano，在这种情况下你会遇到this bug，很快就会发布修复。

【讨论】：