gulp autoprefixer编译为.scss而非.css

gulp autoprefixer compiling to .scss not .css

本文关键字：而非 css scss autoprefixer 编译 gulp      更新时间：2023-09-26

我试图使用gulp-autorefixer，但当它编译代码时，它会在我的公用文件夹中创建一个.scs文件。我的文件结构如下：

Root>dev>sass>main.scss

&

public>css>main.css

当我在main.scss中进行更改时，一般的sass代码编译得很好，但当使用autoprefix时，它会在我的public/css目录中创建一个main.scss文件。

我的gullfile.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']);
});

您在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传递流之前，您必须自己完成。

相关文章：