javascript - gulp autoprefixer 编译为 .scss 而不是 .css

Question

我正在尝试使用 gulp autoprefixer，但是当它编译代码时，它会在我的公共(public)文件夹中创建一个 .scss 文件。我的文件结构如下:

根> dev > sass > main.scss

&

公共(public) > 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 上工作而设计的，并且不编译 sass。因此，在通过 autoprefixer 传递流之前，您必须自己完成此操作。