reactjs - The opacity value was changed to 1% after building the Reacjs project

Question

Im building a Reactjs project and using scss instead of css. In the App.scss file, I set opacity: 87%; (note: unit is percent).

Everything worked normally (the opacity value still equal 87%) when I run command: yarn start

But when I run command: yarn build and check value opacity in the file build/static/css/main.86352307.chunk.css then the opacity value was changed to 1%.

File App.scss:

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

After build project: File build/static/css/main.86352307.chunk.css

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

Step to reproduce issue

#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

Please tell me know the reason.

question from:https://stackoverflow.com/questions/58853844/the-opacity-value-was-changed-to-1-after-building-the-reacjs-project

Answer 1

This issue has been reported in create-react-app and 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

It appears the bug has been fixed, but the latest released version does not have the fix. I've fixed the problem by changing my opacity values from nn% to 0.nn values (e.g. 70% becomes 0.7).