[React & 환경세팅] [sass-rem] 렌더링 시 개발자도구에서 확인하면 rem(몇px) 동작 안하고 strike 쳐질때 (sass-rem not working)

vue에서 하던대로 package.json 들고와서 sass 열심히 연결하고
sass-rem 설치해서 하려는데 렌더링 된 모습이 font-size: rem(15px) 하면서 strike 쳐지고 계속 적용이 안됐다.

 

해결방법

알고보니 node-sass가 문제였다. 공식문서에서 지우고 sass로 깔아서 하라길래 했더니 바로 적용완료!!!

npm uninstall node-sass //node-sass 지우기
npm install sass //sass 설치하기

 

https://create-react-app.dev/docs/adding-a-sass-stylesheet/

Adding a Sass Stylesheet | Create React App

 

 

+깨달음

jsx나 tsx는 브라우저에서 이해할수없으므로 컴파일 하여 js로 인식하게 한다. 따라서 react에서는 scss를 그대로 import하여 사용하여도 (== 컴파일하지않아도) 정상적으로 동작한다.