create-react-app 에서 sass loader 추가해 scss 불러오기

이 포스트를 보기 전 create-react-app 에서 eject 명령으로 설정 파일 추출하기를 읽고 오시는 것이 좋습니다.

——

create-react-app의 공식 문서에는 eject를 하지 않고 세팅하는 방법에 대해서도 다루고 있습니다. eject를 하기 전에 해당 방식에 대해서도 고려해보십시오.

——

우선 프로젝트에서 eject를 하고 sass-loader와 node-sass를 설치합니다. ruby 기반의 compass를 이용하는 방법도 있지만 왠지 node 기반의 프로젝트에서는 node-sass가 대세인 것 같습니다. 이후 설정에서도 node-sass 쪽이 간편하니 node-sass를 설치하겠습니다.

config/webpack.config.dev.js 를 열어서 .css$ 로 검색해보면 modules > rules > oneOf > test 부분에 검색이 하나 됩니다. 특정 확장자에 대한 처리가 된 부분인데, 이 부분에 scss에 대한 내용을 추가합니다.

file loader의 exclude 부분은 최신 버전 세팅에서는 사라졌으므로 해줄 필요가 없습니다.
이제 config/webpack.config.prod.js 에도 같은 내용을 추가해줍니다.

이제 scss를 import 하면 됩니다.
scss 파일이 수정되면 핫로더가 동작해 페이지가 리로드 되는 걸 볼 수 있습니다.