gulp autoprefixer編譯爲.scss而不是.css

Question

我正嘗試使用gulp autoprefixer，但是當它編譯代碼時，它會在我的公用文件夾中創建一個.scss文件。 我的文件結構如下：

根>設備>青菜> main.scss

&

公共> CSS>的main.css

當我在main.scss的更改一般的sass代碼編譯得很好，但是當使用autoprefix時，它會在我的public/css目錄中創建一個main.scss文件。

我gulpfile.js如下：

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 

var autoprefixer = require('gulp-autoprefixer'); 


gulp.task('styles', function() { 
    gulp.src('./dev/sass/**/*.scss') 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(gulp.dest('./public/css/')); 
}); 

gulp.task('autoprefixer', function() { 
    return gulp.src('./dev/sass/**/*.scss') 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions'], 
      cascade: false 
     })) 
     .pipe(gulp.dest('./public/css/')); 
}); 

//Watch task 
gulp.task('default',function() { 
    gulp.watch('./dev/sass/**/*.scss',['styles', 'autoprefixer']); 
}); 

Answer 1

你錯過了在autoprefixer任務SASS編譯。

應該

gulp.task('autoprefixer', function() { 
    return gulp.src('./dev/sass/**/*.scss') 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions'], 
      cascade: false 
     })) 
     .pipe(gulp.dest('./public/css/')); 
}); 

Autoprefixer由在普通的CSS工作，並不會編譯頂嘴。所以你必須在通過autoprefixer傳遞流之前自己做。