构建 Reacjs 项目后不透明度值更改为 1%

Question

我正在构建一个 Reactjs 项目并使用 scss 而不是 css。在 App.scss 文件中，我设置了不透明度：87%；（注：单位为百分比）。

当我运行命令时，一切正常（不透明度值仍然等于 87%）：yarn start

但是当我运行命令：yarn build 并检查文件 build/static/css/main.86352307.chunk.css 中的值不透明度时，不透明度值更改为 1%。

文件 App.scss：

.App {
  text-align: center;
  opacity: 87%;
}

构建项目后：文件 build/static/css/main.86352307.chunk.css

.App{text-align:center;opacity:1%}
/*# sourceMappingURL=main.86352307.chunk.css.map */

重现问题的步骤

#1. npx create-react-app my-app
#2. cd my-app
#3. yarn add node-sass
#4. rename file App.css to App.scss and then add opacity: 87% in class .App

#Testcase 1: run yarn start => the opacity value (87%) is apply for class .App
#Testcase 2: run yarn build => the opacity value (1%) is apply for class .App

请告诉我知道原因。

Answer 1

此问题已在 create-react-app 和 optimize-css-assets-webpack-plugin 中报告。

https://github.com/facebook/create-react-app/issues/7980

https://github.com/NMFR/optimize-css-assets-webpack-plugin/issues/118

似乎该错误已修复，但最新发布的版本没有修复。我通过将不透明度值从 nn% 更改为 0.nn 值（例如 70% 变为 0.7）来解决该问题。

Answer 2

我认为不透明度接受 0.0 到 1.0 范围内的值。区间之外的任何值，尽管有效，都被限制在范围内最接近的极限。在您的示例中，最近的限制被限制为 1%；

https://developer.mozilla.org/en-US/docs/Web/CSS/opacity