使用gulp-sass编译scss文件，但是修改@import文件时就会报错，请问怎么解决？

问题描述

问 题

sass文件结构如下：

其中index.scss中

@import "reset";

@import "common";

gulp的编译task是这么写的：

用browser-sync来监控文件变动并实时预览

然后，主要问题：

当我一旦修改reset.scss或common.scss时就会报错

尝试了很多办法都没有效果。请问如何解决。

解决方案

延时一点执行编译. 如下代码(顺便解决编译出错就会停止任务的问题):

gulp.task('css', function() {
    return new Promise(function(resolve, reject) {
        return setTimeout(function() {
            return gulp.src('src/sass/*.scss')
            .pipe(sass())
            .on('error', function(e) {
                return reject(e) && this.end();
            })
            .pipe(gulp.dest('dist/css'))
            .on('end', resolve)
            .pipe(reload({stream: true}));
        }, 500);
    }).catch(function(e) {
        return console.warn(e.messageFormatted);
    });
});

这篇关于使用gulp-sass编译scss文件，但是修改@import文件时就会报错，请问怎么解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！