Estoy construyendo un proyecto Reactjs y usando scss en lugar de css. En el archivo App.scss, configuré la opacidad: 87%; (nota: la unidad es un porcentaje).
Todo funcionó normalmente (el valor de opacidad sigue siendo igual al 87%) cuando ejecuto el comando: inicio de hilo
Pero cuando ejecuto el comando: creación de hilo y verifico la opacidad del valor en el archivo build/static/css/main.86352307.chunk.css, el valor de opacidad se cambió al 1%.
Archivo App.scss:
.App { text-align: center; opacity: 87%; }Después del proyecto de compilación: archivo build/static/css/main.86352307.chunk.css
.App{text-align:center;opacity:1%} /*# sourceMappingURL=main.86352307.chunk.css.map */Paso para reproducir el problema
#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 .AppPor favor, dime el motivo.
Este problema se informó en create-react-app y 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
Parece que el error se ha solucionado, pero la última versión publicada no tiene la solución. He solucionado el problema cambiando mis valores de opacidad de nn% a 0.nn valores (por ejemplo, 70% se convierte en 0,7).
Creo que la opacidad acepta valores en el rango de 0,0 a 1,0. Cualquier valor fuera del intervalo, aunque sea válido, se sujeta al límite más cercano en el rango. En su ejemplo, el límite más cercano está sujeto al 1%;
En la compilación de producción, el optimizador css ( cssnano ) está redondeando el número (87 en su caso). Esto está sucediendo en la versión angular 9 y superior también.
Para evitar esto, puede usar los valores entre 0 y 1. En su caso, puede usar 0.8 como se muestra a continuación dentro de su regla css
opacity: 0.8;