#2 - SCSS Compile 방법

Compiler Parcel 설치하기

html에서 scss를 사용하면 웹에서 읽지 못하기 때문에 compile 단계를 진행해야 한다.

이 compile 단계를 도와주는 것이 parcel이라는 bundler다. 아래 단계를 통해 parcel을 설치해보자.

 

파일 준비하기

linked 된 index.html 파일과 scss 파일을 제작한다.

터미널 열기

 

터미널 > 새 터미널을 연다.

 

package.json 파일 만들기

'package.json'파일은 설치한 패키지들을 관리해준다. 즉, parcel을 설치하면 'package.json'파일에 기록이 되는 것이다. 때문에 parcel 설치 전, 'package.json'파일을 먼저 생성한다.

package.json 생성

 

'npm init -y' 명령어를 터미널에 넣고 enter를 쳐 'package.json'을 생성한다.

package.json 생성 확인

 

파일 리스트에 'package.json'파일이 생성되었는지 확인한다.

Parcel 설치하기

Parcel 설치

 

'npm install --save-dev parcel-bundler' 명령어를 터미널에 넣고 enter를 쳐 Parcel을 설치한다.

Parcel 설치 확인

 

'package.json' 파일에 parcel의 정보를 찾아 parcel이 잘 설치되었는지 확인한다.

 

Parcel 실행하기

Parcel 실행

 

'npx parcel 파일명'을 입력하여 parcel을 실행한다. 

Parcel 실행 확인

 

준비가 끝나면 로컬 호스트(파랑 글자)로 접속하여, 설정한 내용이 잘 적용되었나 확인한다.

내용이 잘 적용되었다면, SCSS를 시작할 준비가 완료된 것이다.

 

 

---

 

Compiler 설치 안하고 바로 결과물 확인하기

만약 parcel을 설치하지 않고 간단하게 코드를 확인해보고 싶으면, 아래 사이트에서 확인한다.

 

#SCSS 시뮬레이터

https://www.sassmeister.com/

SassMeister | The Sass Playground!