SASS 컴파일러 설치 및 자동 컴파일 설정

프로젝트 초기화

• 프로젝트 root 폴더에서 다음 명령을 실행한다.
  $npm init
  * root 폴더에 package.json 파일이 생성된다.

• 폴더구조는 다음과 같다. (폴더에 있는 파일명)
  root (index.html)
   - css (style.css)
   - sass (main.scss)

SASS 컴파일러 설치

• node-sass 설치를 위해 다음 명령을 실행한다.
  $npm i node-sass --save-dev
  * sass 컴파일러는 개발시에만 필요하므로 --save-dev 옵션을 추가한다.

SASS 컴파일러 실행

• package.json 파일의 "scripts" 항목에 다음 내용을 추가한다.
  {
     "compile:sass": "node-sass sass/main.scss css/style.css"
  }
• root 폴더에서 다음 명령을 실행한다.
  $npm run compile:sass
  * 컴파일되어 style.css 파일로 저장된다.

SASS 컴파일러 자동 실행

• package.json 파일의 "scripts" 항목에 다음 내용을 추가한다.
  {
     "compile:sass": "node-sass sass/main.scss css/style.css -w"
  }
• root 폴더에서 다음 명령을 실행한다.
  $npm run compile:sass
  *대기 상태로 되며, 파일이 변경되면 자동으로 컴파일된다.