React.js SASS 설치하는 방법

오늘은 CSS를 좀 더 편하게 사용할 수 있는 방법에 대해 소개하겠다.

기존에 CSS를 작성할 때 코드가 길어지면 가독성이 크게 떨어지는 경험을

다들 한두번쯤을 해봤을 것이다.

예를 들어 아래와 같은 코드가 있다고 가정한다. (출처 : velopert님 블로그)

.App { ... } .App .header { ... } .App .logo { ... } .App .intro { ... }

이런 경우 SASS를 사용하면 아래와 같이 사용할 수 있다.

.App {

.header { ... }

.logo { ... }

.intro { ... }

}

한눈에 봐도 코드 작성도 보다 쉽게 할 수 있고 가독성도 좋아진다.

인터넷을 찾아보니 대부분의 예제들은 create-react-app이후 eject를 하여 무언가 작업을 했는데

나같은 경우 eject를 하고 싶지 않아서 그냥 진행하는 방법을 찾아봤다.

나는 맥북을 사용하고 있으므로 OSX를 기준으로 설명하겠다. (크게 다른점은 없음)

아래의 명령어로 npm을 통해 sass를 설치한다.

npm install -g sass

(처음에는 공식 홈페이지에 나와있는 것처럼 homebrew로 설치하려 했지만 오류가 발생하여 npm으로 대체함)

위처럼 설치한 이후 sass명령어를 입력해서 정상적으로 동작하는지 확인해본다.

다음으로 sass 파일들을 모아둘 폴더를 하나 생성한다.

mkdir -p src/styles/scss src/styles/css

파일도 하나 생성한다.

touch src/styles/scss/App.scss