這是在講 Gulp 不是飲料是任務自動化工具這件事：安裝 SCSS 篇

前言

前面大致上也已經學會基礎的語法，接下來要來講講該如何替自己的 Gulp 加入 Sass/SCSS 處理吧!

gulp-sass

首先我們可以開啟 npm 網站來學著看教學該如何使用，在那之前我們可以先輸入以下指令替自己的專案加入套件

npm install node-sass gulp-sass --save

-dev 的意思就是只用於編譯環境，但是我們是整個專案都要使用，所以就去除 -dev

使用 gulp-sass

在文本下面有一個 Basic Usage，其實就有講解該如何使用，基本上可以參照範例去複製貼上

但是輸出的位置 gulp.dest() 記得要做調整

加入完畢之後讓我們來新增資料夾及檔案

然後在 all.scss 撰寫一點東西

$color: #00cc99;

.box {
  background-color: red;
  &:hover {
    width: 10px;
    background-color: $color;
  }
}

接下來輸入 gulp scss 看看會發生什麼事情~

最後可以發現 public 資料夾出現了一個 CSS 資料夾，而且內容與我們剛剛撰寫的一樣

(真不知道為什麼編譯出來排版這麼怪)

結尾

最後這邊補充一個功能，也就是 sourcemap，有些人可能不知道 sourcemap，由於 SCSS 是以模組化的概念拆開來撰寫，所以如果不開啟 sourcemap 的功能的話將會導致我們在修改調整 scss 上的困難，所以這邊順便補充該怎麼開啟 sourcemap

首先在官方有提供開啟方式，所以我們只需要將原本的程式碼稍作調整即可

調整完畢就可以試著輸入 gulp scss

這時候你會發現一個錯誤，他會跟你說 sourcemaps is not defined

所以這邊要先安裝一下 gulp-sourcemaps 套件

npm install --save gulp-sourcemaps

接下來就是引入 gulp-sourcemaps，然後調整一個地方即可

加入完畢後可以再試著輸入 gulp scss，這時候就不會出現錯誤了，然後你也可以發現 CSS 資料夾下多了一個 .map，這個就是 sourcemaps

.pipe(sourcemaps.write()) 如果不輸入 . 就不會生成 .map唷，這點要注意