SASS 이용을 위한 환경설정

vscode를 실행한 다음 터미널을 아래와 같이 열어 준다. 

필자는 터미널에서 명령어를 입력하여 react-tutorial이라는 폴더를 생성하도록 하겠다.

아래와 같이 입력하면 된다.

 

>mkdir react-tutorial

 

그 다음에는 react-tutorial 폴더로 이동하여 react의 기본적인 라이브러리를 설치한다.

 

>cd react-tutorial

>npx create-react-app styling-with-sass

 

우리가 실습할 폴더의 이름은 stylinh-with-sass이며 이 폴더를 열어 작업영역으로 불러오면 아래와 같이 실행된다. 

 

 

 

 

 

 

여기서 우리는 한 가지를 더 설치해야한다. node-sass 라는 이름의 라이브러리이다. 이 라이브러리를 설치해야 우리의 프로젝트에서 스타일링을 멋지게 할 수 있다. 폼나는 컴포넌트를 구사할 절호의 찬스이니 조금만 참고 설치해보자.

 

터미널 창에 다음과 같이 입력하면 된다. 

 

>yarn add node-sass

 

이 라이브러리는 sass로 작성한 코드를 css로 변환해주는 역할을 해준다. 환경설정이 끝났으니 다음에는 코드를 직접 작성해 보도록 하자.