Parcel로 Sass(SCSS) 컴파일

 

SCSS는 브라우저에서 동작할 수 없기 때문에

표준 CSS로 변환을 해주어야 한다.

 

보통 Create React App 환경에서 SCSS를 사용했기 때문에 간단하게 설치 후 사용했지만

그냥 HTML파일만 달랑 있는 상태에서 하려니 난감했다.

 

물론 전역으로 node-sass 설치 후 명령어를 통해

컴파일 하는 방법도 있었지만 저장 시 바로 빌드되고

새로고침 없이 브라우저 창에서 확인하기를 원했다.

 

 

webpack 설정은 조금 복잡하지만

Parcel은 간단하게 설정 할 수 있다.

 

 

1. Parcel 전역 설치

npm install -g parcel-bundler

 

2. Sass 설치

npm install --save-dev node-sass

 

3. Sass 파일 연결

<link rel="stylesheet" href="scss/main.scss">

 

4. 실행

parcel index.html