SCSS

🙋‍♂️ REF Document

SCSS 사용법

1. node-sass

Node.js를 LibSass(컴파일러)에 바인딩한 라이브러리

$ npm install -g node-sass

🔻 컴파일 (입력 파일경로와 출력 파일경로를 작성)

$ node-sass [--watch] scss/main.scss public/main.css 

❗️ --watch 옵션은 런타임 중 파일을 감시 - 자동 컴파일함.

2. Gulp

• 빌드 자동화 도구 (JS Task Runner)인 Gulp 에서는 gulpfile.js를 만들어
  아래와 같이 설정 가능함.

• Gulp 전역 설치

$ npm install -g gulp 

🔻 SASS 컴파일러인 gulp-sass를 설치

$ npm install -D gulp-sass

🔻 컴파일 실행

$ gulp sass[:watch]

:watch 를 붙이면 런타임 중 감시모드로 실행

3. Webpack

• 설정 복잡. 웹팩 설정 관련 포스팅을 참조.

4. Parcel

• 웹 어플리케이션 번들러 Parcel.
• 단순하게 컴파일 가능

$ npm install -g parcel-bundler

• node-sass를 설치해야 함.

🔻 HTML에 link:css 하듯이 SCSS 파일을 연결하면 끝!

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

• 다른 설정파일이나 옵션이 필요 없다. 매우 간단.

🔻 컴파일

$ parcel index.html 
# 혹은
$ parcel build index.html

-> dist/ 폴더에서 컴파일된 SCSS 파일을 볼 수 있다.