[Scss] React에서 Scss 사용하기

Scss 적용시 에러발생

React에서 CSS module을 사용하다가 .scss로 확장자를 변경하니 webpack에 관련된 error들을 나에게 보내주었다..

개발환경

React에서 Scss를 사용하려면 두가지 module을 설치해 주어야 했다.

• node-sass: scss를 다룰 수 있는 node program
• sass-loader: webpack에 필요한 loader

npm i node-sass sass-loader

다른 포스트들을 보니 module을 설치한 후 webpack.config.js에서 직접 수정을 해주어야 했는데 버전이 달라서인지 나는 npm 패키지 매니저로 설치만 해주어도 되었다.("react": ^17.0.2")

배포환경에서 동작하는지 확인하기

개발환경에서는 제대로 동작하였는데 과연 build를 한 후에도 제대로 정상작동을 하는가?

• 시도 중