React.js SCSS 적용하는 방법

CSS는 참 애매한 존재이다.

보통 CSS로 스타일링을 하게 되면 코드가 상당히 길어지는 경우가 생기는데,

이럴 경우 SASS 또는 SCSS등을 통해 해결할 수 있다.

나같은 경우에는 현재 리액트를 통해 작업하고 있는데 SASS를 사용하고 있다.

순수 CSS를 사용하는 것보다 훨씬 높은 생산성과 가독성을 줄 수 있으니 반드시 사용하길 권장한다.

먼저 아래의 명령어로 리액트 프로젝트를 생성한다.

create-react-app test

다음으로 생성한 폴더로 들어가서 아래의 명령어를 입력하여 node-sass를 설치한다.

yarn add node-sass

설치를 하고 package.json파일을 열어보면,

위처럼 dependencies부분에 node-sass가 추가된걸 볼 수 있다.

추가적으로 gem을 통해 sass를 설치해준다.

gem install sass

설치가 완료되었으면 이제 우리가 작성한 SCSS를 CSS파일로 변환시켜주게 만들어야 한다.

그전에 우리의 SCSS파일을 모아놓을 폴더를 /src/styles/scss로 생성한다.

다음으로 package.json을 열고 scripts부분에 아래의 라인을 추가한다.

"sass": "sass --watch src/styles/scss:src/styles/css"

이제 scss폴더에 App.scss처럼 scss확장자 파일을 만들고 실제 사용할 컴포넌트에서 import시킨다.

그리고 아래의 명령어로 변환시킨다.

yarn run sass

그러면 styles폴더 아래에 css파일이 생성되며 우리가 작성한 코드가 css로 변환된 걸 볼 수 있다.

마지막으로 배포를 진행할 때 build를 사용할텐데, build시 자동으로 코드를 변환해주게 만들어보자.

package.json을 열고 build부분을 다음과 같이 바꿔준다.

"build": "yarn sass:build && react-scripts build",

"sass:build": "sass --update src/styles/scss:src/styles/css"

참고로 작업을 할때는 항상 yarn run sass를 실행시킨 후 진행해야 한다.