리액트 프로젝트에 sass 설정하기

sass란 무엇일까요?

완벽한 언어란 없습니다. 계속해서 수정해나가면서 점점 괜찮아지는 수 밖에 없죠. css란 언어도 그렇습니다. 웹페이지를 꾸밀 때 당연히 사용해야할 언어이지만 한계가 많은 언어입니다. 여러 선택자를 통해 효과를 주다보면 금방 코드의 양이 늘어나고 코드의 양이 늘어나면 그에 따라서 또 복잡해집니다. 이에 여러가지 해결책들이 생겼고, sass도 그 해결책 중의 하나라고 생각하시면 됩니다.

sass는 기초 언어에 힘과 우아함을 더해주는 css의 확장이다.

위의 말에도 나와 있듯이 css에서의 한계점들을 sass는 여러가지 기능들을 추가해서 해결하려고 하죠.

리액트 프로젝트에 sass를 설정해봅시다.

예전에는 yarn eject 명령어를 통해서 웹팩 설정을 해줬어야 하지만 이제는 간단하게 sass를 프로젝트에 적용할 수 있습니다.

"npx create-react-app 프로젝트명" 을 통해서 리액트 프로젝트를 만들어주세요.  

프로젝트를 만든 뒤에는 css 파일을 scss 확장자로 바꿔주시면 됩니다. 저는 css 모듈도 같이 사용할 예정이기 때문에 module이라는 이름도 같이 넣어주었습니다.

즉, App.css 파일을 App.module.scss라는 이름으로 변경하는 것입니다.

그리고 리액트를 실행하면 아래와 같은 에러가 나타납니다.

To import Sass files, you first need to install node-sass. Run `npm install node-sass` or `yarn add node-sass` inside your workspace.

에러에서 나타난 것처럼 node-sass를 다운로드 해주세요.

아래의 코드를 사용해서 sass가 잘 적용되었는 지 확인해보세요.

span의 색이 변경된 것이 보이시나요? 귀찮은 설정 필요없이 간편하게 css module과 sass를 적용시킬 수 있게 되어서 리액트가 점점 더 멋져보이는 것 같습니다.