Gulp SASS: file to import not found or unreadable

I recently ran into a problem with gulp-sass, whereby some of the partials that were being included in my main .scss file were intermittently not being found. Gulp would throw up the error:
file to import not found or unreadable: somefilename
What's odd about this is that not only did the files in question exist, but if I simply went in and saved any file at all that was being 'watched' by Gulp - triggering a refresh of the gulp-sass task - the files would miracuously be found and everything would work fine!

Doing a bit of Googling I found that lots of people were having similar issues and the general consensus seems to be that the cause is something to do with race conditions when saving files - specifically that libsass is just too damned fast.

I've seen it asserted that anyone who has this error must be using Windows with Sublime Text, and thus the workaround is to enable an option available in Sublime Text called atomic_save. This option saves to a temporary file and then overwrites the old with the new - and indeed it does seem to solve the issue for a lot of people.

I'm using an older version of Sublime Text however, which doesn't have the atomic_save option available - so I had to look elsewhere.

What I found is that simply getting gulp to pause for a few milliseconds before attempting to compile the SCSS, solved the issue perfectly.

Here's how we do this:
Navigate to the project folder and from the command prompt install gulp-wait
npm install gulp-wait --save-dev

I'm using the html5 webapp yeoman generator (that's a mouthful), which makes use of the gulp-load-plugins package and uses wiredep to hook up bower dependencies, so in my case I needed to add .pipe($.wait(200)) to the wiredep task, thus:

// inject bower components
gulp.task('wiredep', () => {  
    gulp.src('app/styles/*.scss')
        .pipe($.wait(200))
        .pipe($.filter(file => file.stat && file.stat.size))
        .pipe(wiredep({
            ignorePath: /^(\.\.\/)+/
        }))
        .pipe(gulp.dest('app/styles'));

    gulp.src('app/*.html')
        .pipe(wiredep({
            exclude: ['bootstrap-sass'],
            ignorePath: /^(\.\.\/)*\.\./
        }))
        .pipe(gulp.dest('app'));
});

Now, all is well!

Comments