sass轉css並處理瀏覽器兼容性

一、大前提，你必須安裝必備的環境

　　node.js

　　安裝cnpm解決下載卡頓

　　　　命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

　　　　查看官網api：https://www.gulpjs.com.cn/docs/getting-started/quick-start/

　　安裝gulp

　　　　命令：npm install --global gulp-cli

　　　　查看官網api：https://www.gulpjs.com.cn/docs/getting-started/quick-start/

　　查看環境

　　　　

二、開始：

cnpm init
cnpm install --save-dev gulp
cnpm install --save gulp-sass
cnpm install --save gulp-autoprefixer

創建gulpfile.js文件

let gulp = require('gulp'),
    sass = require('gulp-sass'),//sass轉css插件
    auto = require('gulp-autoprefixer');//解決瀏覽器兼容問題的插件
gulp.task('sass', function(){
    return gulp.src('sass/*')//需要編譯的文件目錄
        .pipe(sass({outputStyle:'compressed'}).on('error',sass.logError))
        .pipe(auto({//處理兼容
            browsers:['last 2 version'],
            cascade:false
        }))
        .pipe(sass())//開始編譯
        .pipe(gulp.dest('css'));//存放編譯之后的目錄
});

// exports.default = function(){}

使用gulp sass運行（此處的sass對應的就是gulpfile.js文件中的task指令）

 

 結果: