[SCSS/CSS] sass 설치 및 컴파일을 yarn 명령어로 설정하기

Sass 설치

brew install sass/sass/sass

설치하다보면 경우에 따라 퍼미션 에러가 날 수 있다.
당황하지 않고 나와있는 에러를 그대로 복사해서 붙여준다.

 sudo chown -R $(whoami) /usr/local/share/man/man5 /usr/local/share/man/man7 /usr/local/share/man/man8
 chmod u+w /usr/local/share/man/man5 /usr/local/share/man/man7 /usr/local/share/man/man8

설치가 완료되었는지 확인해보자.

sass --version

 

자동 컴파일 설정하기

yarn install

명령어를 입력하면 package.json파일이 생성된다.
이 파일을 열어서 scripts를 추가한다.

{
  "name": "my-project",
  "scripts": {
    "run": "sass --ouput-style compressed --watch ./scss/style.scss style.css"
  },
  "dependencies": {
    "node-sass": "^4.13.0"
  }
}

watch 플래그를 사용하면 scss가 css로 컴파일된다.
여기에 --ouput-style 옵션 하나를 추가한 것이다.
compressed는 최대한 빈공간 없이 압축한 형태를 말한다.

앞으로 작업하기전 yarn run 명령어를 입력하면 scss가 컴파일되는 모습을 볼 수 있다.