gulp-sass 安裝SASS

主要編譯 sass / scss

安裝 NPM

npm install gulp-sass --save-dev

https://www.npmjs.com/package/gulp-sass

編譯 Scss 檔案

將要編譯 Scss 檔案目錄指定為專案scss/**/*.scss目錄下的所有.scss的檔案(包含所有階層目錄的檔案)

並將編譯後的 css 檔案指定放在css目錄下

var gulp = require('gulp');             // 載入 gulp
var Sass = require('gulp-sass');    // 載入 gulp-sass

gulp.task('sass', function () {   // 定義 sass 的任務名稱
    gulp.src('styles/**/*.scss')    // 指定要處理的 Scss 檔案目錄
        .pipe(Sass())         // 編譯 Scss
        .pipe(gulp.dest('html/tmp/css'));  // sass 編譯完成後的匯出資料夾
});

執行

$ gulp sass
[17:31:07] Using gulpfile ~/gulpfile.js
[17:31:07] Starting 'sass'...
[17:31:07] Finished 'sass' after 12 ms

執行完畢就可以到css目錄看編譯後的檔案的成果了!

PS. 由於 compass 已經不更新 所以不使用 compass 如果要使用請點選 https://www.npmjs.com/package/gulp-compass

results matching ""

    No results matching ""