[React JS] 리액트 Scss, Sass 적용하기

 

Scss는 CSS 전처리기로 많이 쓰인다.

 

하지만 리액트 프로젝트에서 Scss 파일을 작성해 무작정 실행하고자 한다면 오류가 발생할 것이다.

 

따라서 해당 프로젝트에 Scss(Sass)를 설치하여 리액트와 연동되는 과정을 알아보고자 한다.

 

1. 리액트 프로젝트에 Scss 설치

먼저, 터미널을 이용해 Scss를 설치해야 한다.

 

npm install node-sass

위 코드를 터미널에 입력하면 해당 프로젝트에 Scss 설치가 완료된다.

 

yarn일 경우에는 아래와 같이 작성하면 된다.

yarn add node-sass

 

※ 이때 Scss를 사용할 리액트 프로젝트마다 따로 각가 설치해줘야 한다.

 

설치를 완료하면 "package.json" 파일의 dependencies 부분에 node-sass가 추가된 것을 확인할 수 있다.

 

위 과정을 통해 Scss 설치를 완료하면 .scss 확장자를 이용해 여러 컴포넌트의 스타일 적용이 가능할 것이다.