我无法编译sass并在浏览器中重新加载

Question

**当我保存更改两次或三次时，效果很好，但是当我保存更改超过三次时，便发生了此错误。当我尝试在浏览器中编译sass并重新加载时，创建了一个可怕的情况 我该如何解决这个**

  

请帮助我解决该问题。   我添加源gulpfile.js代码   以及错误结果。所以让我解决了

ASUS@DESKTOP-U34ESKM MINGW64 ~/Desktop/front/project-1
$ gulp start
[11:28:09] Using gulpfile ~\Desktop\front\project-1\gulpfile.js
[11:28:09] Starting 'browser-sync'...
[11:28:10] Finished 'browser-sync' after 308 ms
[11:28:10] Starting 'start'...
[11:28:10] Finished 'start' after 78 μs
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.109:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Serving files from: ./
[11:28:23] Starting 'sass'...
[Browsersync] 1 file changed (style.compile.css)
[11:28:23] Finished 'sass' after 125 ms
[11:28:48] Starting 'sass'...
[Browsersync] 1 file changed (style.compile.css)
[11:28:48] Finished 'sass' after 96 ms
[11:29:01] Starting 'sass'...
[Browsersync] 1 file changed (style.compile.css)
[11:29:01] Finished 'sass' after 73 ms
[11:29:09] Starting 'sass'...
[Browsersync] 1 file changed (style.compile.css)
[11:29:09] Finished 'sass' after 80 ms
[11:29:26] Starting 'sass'...

events.js:167
      throw er; // Unhandled 'error' event
      ^
Error: sass\main.scss
Error: File to import not found or unreadable: abstracts/base.
        on line 1 of sass/main.scss
>> @import 'abstracts/base';
   ^

    at options.error (C:\Users\ASUS\Desktop\front\project-1\node_modules\node-sass\lib\index.js:291:26)
Emitted 'error' event at:
    at DestroyableTransform.onerror (C:\Users\ASUS\Desktop\front\project-1\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:558:12)
    at DestroyableTransform.emit (events.js:182:13)
    at onwriteError (C:\Users\ASUS\Desktop\front\project-1\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:449:12)
    at onwrite (C:\Users\ASUS\Desktop\front\project-1\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:470:11)
    at WritableState.onwrite (C:\Users\ASUS\Desktop\front\project-1\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:180:5)
    at DestroyableTransform.afterTransform (C:\Users\ASUS\Desktop\front\project-1\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:93:3)
    at errorM (C:\Users\ASUS\Desktop\front\project-1\node_modules\gulp-sass\index.js:118:12)
    at Object.callback (C:\Users\ASUS\Desktop\front\project-1\node_modules\gulp-sass\index.js:127:16)
    at options.error (C:\Users\ASUS\Desktop\front\project-1\node_modules\node-sass\lib\index.js:294:32)

const gulp = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const browserSync = require('browser-sync');


//Static server
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch('sass/abstracts/*.scss', ['sass']);
});


//Compile sass and inject browser
gulp.task('sass', function () {
    
        return gulp.src("sass/main.scss")
        .pipe(sass())
        .pipe(rename('style.compile.css'))
        .pipe(gulp.dest('css/'))
        .pipe(browserSync.stream())

});

gulp.task('start',['browser-sync']);

Answer 1

尝试使用gulp-wait，它会在调用链中的下一个函数之前插入一个额外的延迟。因此可以扣除更改。

参考https://github.com/olefredrik/FoundationPress/issues/731

示例用法

  return gulp.src("sass/main.scss")
        .pipe(wait(500))
        .pipe(sass())