Reacjs 프로젝트 구축 후 불투명도 값이 1%로 변경됨

Reacjs 프로젝트 구축 후 불투명도 값이 1%로 변경됨

Reactjs 프로젝트를 만들고 css 대신 sss를 사용하고 있습니다.App.scss 파일에서 불투명도를 87%로 설정했습니다(참고: 단위는 퍼센트입니다).

명령어를 실행하면 모든 것이 정상적으로 동작합니다(불투명도 값은 87%입니다).실 시작

그러나 명령어를 실행할 때, yarn build와 파일 build/static/css/main의 값의 불투명도를 확인합니다.86352307.css. 그 후 불투명도 값이 1%로 변경되었습니다.

파일 App.scss:

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

빌드 후 프로젝트:파일 빌드/스태틱/css/메인86352307.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

이유를 알려주세요.

이 문제는 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.nnn 값으로 변경하여 문제를 해결했습니다(예: 70%는 0.7이 됩니다).

불투명도는 0.0~1.0 범위의 값을 받아들인다고 생각합니다.간격을 벗어나는 값은 유효하지만 범위에서 가장 가까운 한계값으로 클램프됩니다.이 예에서 가장 가까운 한계는 1%로 고정되어 있습니다.

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

생산 시 css optimiser(cssnano)는 숫자를 반올림하고 있습니다(고객의 경우 87).이것은 각도 버전 9 이상에서도 발생합니다.

이를 피하기 위해 0과 1 사이의 값을 사용할 수 있습니다.이 경우 css 규칙 내에서 다음과 같이 0.8을 사용할 수 있습니다.

opacity: 0.8;

MDN 불투명 길드

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