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

Question

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

根 > 开发 > sass > main.scss

&

public > css > main.css

当我在 main.scss 中进行更改时，通用 sass 代码可以正常编译，但是当使用自动前缀时，它会在我的 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

您错过了自动前缀任务中的 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 传递流之前你必须自己做。

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

gulp autoprefixer compiling to .scss not .css

javascript

sass

gulp

autoprefixer