#4.0

Gulp SASS

sass를 시작하기에위해서 설치한다. 여기서 gulp-sass를 사용하기위해서는 node-sass먼저 설치되어야한다는점 알아야한다.

yarn add node-sass gulp-sass

npm install sass gulp-sass --save-dev

package.json에 설치된 모듈버전이다.

package.json에 설치가 완료되면 이제 gulpfile에추가하여 sass를 컴파일하는 task를 만든다.

node-sass도 같이 설치하는 이유는 node-sass 컴파일러를 gulp-sass에 적용시키기 위해서였다.

<aside> 📌 gulp-sass는 5.0이상부터 const sass.conpiler = require(”node-sass”);가 default가 아니기에 위와 같이 코드를 구성하여 compiler를 설정해한다.

</aside>

<aside> ⭐ style.scss파일와 다르게 _reset.scss와 _variables.scss파일에 언더바_가 있는것은 sass 가 언더바가 있는 파일은 컴파일 하지 않겠다고 알려주는 의미이다. 만약 reset.sass에 언더바가 없다면 sass가 reset.css를 만들고 style.css에 reset.css를 import한다.

sass는 과정에서 import된 파일을 참조하면 참조된 css파일이 없어도 import된 스타일 적용이 된다.

</aside>

Minigy + Autoprefixer

코드에서 sass.logError를 적었던 이유는 아래와 같이 scss에 $redddddddddd 라는 에러를 발생 시켰을때 콘솔에서 그 에러를 감지하여 우리에게 알려주기 때문이다.

scss에 에러를 발생시켰다.

콘솔창에서 감지된 에러를 출력하였다.