(4) Gulp-編譯scss

發表於 更新於 分類於
Gulp前端自動化工具介紹

前言

這篇來介紹如何在 gulp 中，進行scss的編譯吧。

安裝套件

首先來安裝 gulp-sass 套件

1
npm install sass gulp-sass --save

載入設定

在gulpfile.js裡，依照文件貼上相關設定

1
const sass = require('gulp-sass')(require('sass'));
1
2
3
4
5
function buildStyles() {
  return gulp.src('./source/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./public/css'));
};

上面為編譯scss的gulp任務，用 src 指定 scss 所在的資料夾後，最後在用gulp.dest() 指定編譯後的 css 輸出的位置。

之後在scss資料夾裡，新增一個all.scss檔案。

並輸入一些東西

1
2
3
4
5
6
7
8
9
$color: #00cc99;

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

在commend line 輸入 gulp buildStyles 就可以發現scss被編譯成css檔案，並輸出到public資料夾囉。