[Sass/Scss] parcel 번들러로 Scss 프로젝트 시작하기

1. npm init으로 프로젝트에 package.json 파일 생성하기

여기서 y 플래그는 default 값으로 설정된package.json을 바로 설치하고 싶을때 사용한다. 참고로 -y는 yes를 의미한다.

npm

npm init -y

yarn

yarn init -y

package.json 파일이 생성되었다

 

2. npm i -D parcel-bundler로 parcel 번들러 설치하기

여기서 -D 플래그는 parcel이라는 번들러를 브라우저에 올리지 않고 개발용으로만 사용하도록 설치한다는 의미다. 설치가 완료되면 package.json에 parcel-bundler가 올라가고 node_modules 폴더, package-lock.json 파일이 생성된다. parcel 번들러는 Scss파일을 CSS로 변환시켜 웹브라우저가 해석할 수 있도록 도와주는 도구다.

npm

npm i -D parcel-bundler

yarn

yarn add -D parcel-bundler

 

package.json에 설치된 parcel-bundler

 

3. package.json에 있는 명령어를 아래와 같이 수정한다

• parcel bundler를 실행해 프로젝트(index.html)를 브라우저에서 오픈할 수 있도록 해주는 명령어로 dev를 설정함
• parcel bundler를 실행해 프로젝트(index.html)를 build할 명령어로 build를 설정함

"scripts": {
  "dev": "parcel index.html",
  "build": "parcel build index.html"
},

명령어 수정

 

4. scss 파일을 index.html에 연결한 후 서버 실행하기

npm으로 서버 실행하기

npm run dev

yarn으로 서버 실행하기

yarn run dev

서버가 실행되면 parcel 번들러가 Scss파일을 CSS로 변환시켜주고 변환된 CSS파일은 dist 폴더 안에 저장이 된다.