前端构建工具gulp sass遇到的错误

夕君
  • 1.4k

gulpfile.js

// 样式处理
gulp.task('css', function () {
    var cssSrc = './src/scss/*.scss',
        cssDst = './dist/css';

    gulp.src(cssSrc)
        .pipe(sass({ style: 'expanded'}))
        .pipe(gulp.dest(cssDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(livereload(server))
        .pipe(gulp.dest(cssDst));
});

执行 gulp css 的 时候 报错了 图片描述

37行是

图片描述

最后

如果使用的 gulp-ruby-sass 版本是 1.0.0 以后的,对应 task 写法已经改变. 现在改为如下

// 样式处理
gulp.task('css', function () {
    var cssSrc = './src/scss/*.scss',
        cssDst = './dist/css';

    return sass(cssSrc, { style: 'expanded' })
        .pipe(gulp.dest(cssDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(livereload(server))
        .pipe(gulp.dest(cssDst));

});

这么写后 还是没有生成css目录和相对的css文件 处理后的文件

图片描述

回复
阅读 4.3k
4 个回答

试试,,

gulp.task('css', function () {
    var cssSrc = './src/scss/*.scss',
        cssDst = './dist/css';

    return sass(cssSrc, { style: 'expanded' })
        .pipe(minifycss())
        .pipe(rename({ suffix: '.min' }))
        .pipe(livereload(server))
        .pipe(gulp.dest(cssDst));

});

感觉是gulp.dest()这个任务的关系。它一般都是出现在最后的。手机发的我一会儿去试试。楼主把gulp.dest()写到且仅写到最后试试。

今天组内同事正好遇到同样的问题。
var cssSrc = './src/scss/',
cssDst = './dist/css';

去掉*.scss应该就可以了
如果还不行,把sass-cache文件夹删掉再试

顶博主,这样解决了

宣传栏