javascript - 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 上工作，并且不编译 sass。所以你必须在通过 autoprefixer 传递流之前自己做。