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.
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).
I think opacity accepts values in the range 0.0 to 1.0. Any value outside the interval, though valid, is clamped to the nearest limit in the range. In your example the nearest limit is clamped to 1%;
On production build the css optimiser (cssnano) is rounding up the number(87 in your case). This is happening in angular version 9 and up also.
To avoid this, you can use the values between 0 and 1. In your case, you can use 0.8 as below inside your css rule
opacity: 0.8;