dev/FE
[SCSS/CSS] sass 설치 및 컴파일을 yarn 명령어로 설정하기
포부리
2019. 11. 25. 15:36
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가 컴파일되는 모습을 볼 수 있다.