[CSS] SCSS 프로젝트 만들기

SCSS 프로젝트 생성

1. npm 프로젝트 설정

프로젝트 폴더를 생성하고 해당 프로젝트를 npm 패키지 프로젝트로 설정해준다.

npm init -y

2. parcel 설치

✨ -D: 패키지를 devDependencies에 추가

npm i -D parcel-bundler

package.json의 'Dependencies' 와 'devDependencies' 차이점

parcel bundler 동작 원리

main.scss 파일을 연결했는데 parcel 패키지를 통해서 분석되어 실제 브라우저에서는 css로 변환이 되서 동작하는 개념이다.

프로젝트 폴더에서 dist라는 폴더가 생성된 것을 알 수 있다.
dist 폴더를 열어보면 main.~~~.css 파일이 있을 것이다.
해당 파일을 열어보면 parcel bundler가 분석해서 만든 css 코드 내용이 있는 것이다.

또한, package.json 파일을 열어보면 devDependencies에 sass가 추가된 것을 확인할 수 있는데 이는 parcel bundler가 scss파일이 연결되어 있는 것을 보고 자동으로 sass 패키지를 설치해준것이다!