Question

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

Root＆gt; dev＆gt; sass＆gt; main.scss

＆安培;

公开＆gt; css＆gt;的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传递流之前，您必须自己完成。

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

1 个答案: