Sass outputting error "file to import not found or unreadable"

[agopshi]

When using gulp or gulp watch with the default sass task, sometimes, errors like this appear:

[gulp] Finished 'css' after 11 ms
[gulp] Starting 'sass'...
Error in plugin 'sass'
Message:
    wp-content\themes\example\assets\dev\scss\main.scss
  11:9  file to import not found or unreadable: components/widgets/events
Current dir:
[gulp] Finished 'sass' after 66 ms

The files in question do exist, and are readable. This seems to be some sort of intermittent issue.

[agopshi]

A temporary workaround is to use gulp-ruby-sass (Ruby Sass) instead of gulp-sass (libsass):

npm install --save-dev gulp-ruby-sass

And then edit your gulpfile.js, placing the following code into your assets callback:

// remove the gulp-sass (libsass) task
delete this.tasks.sass;

// use gulp-ruby-sass instead
this.tasks.rubySass = function() {
    var config = this.config,
        gulp = this.gulp;

    gulp.task('ruby-sass', function() {
        // ruby sass does not support the glob syntax
        return rubySass(assetsDir + 'scss/')

            .on('error', function(err) {
                console.error(err.message);
            })

            // move to the output directory
            .pipe(gulp.dest(config.sass.dest));
    });

    this.watches.push({
        watch: config.sass.src,
        task: 'ruby-sass'
    });
};

[agopshi]

It looks like this is a known issue with gulp-sass and some text editors which delete and overwrite files instead of saving directly to them. See issue #235 on gulp-sass. It's not clear why this issue only occurs with gulp-sass and not gulp-ruby-sass. A solution for Sublime Text 3 is to enable atomic saves, as mentioned in the aforementioned issue.