Watch errors on gulp-sass when saving file

While having a gulp watch task running, sometimes a file save triggers a SASS-ing, which will provide the following error. Resaving the file will usually solve the problem. sometime more than 1 resave is needed.

ERROR:

[watcher] File d:\....y\scss\breakpoints\_768up.scss was changed, compiling...
[14:02:08] Starting 'sass'...
[14:02:08] Finished 'sass' after 5.16 ms
[gulp-sass] library\scss\style.scss
Error: File to import not found or unreadable: breakpoints/768up
       Parent style sheet: stdin
        on line 64 of stdin
>>      @import "breakpoints/768up";
   -^

I upgraded gulp-sass just last night. I had this error also before the update, but it was a bit less detailed: only the Error: File to import not found or unreadable: breakpoints/768up

Using Windows 8.1 Gulpfile:

'use strict';

// Include gulp
var gulp = require('gulp'); 

// Include Our Plugins
var jshint = require('gulp-jshint');
 var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// var livereload = require('gulp-livereload');
var prefix = require('gulp-autoprefixer');

var paths = {
    styles: {
        src: './library/sass',
        files: './library/scss/**/*.scss',
        dest: './library/css'
    }
}

var displayError = function(error) {

    // Initial building up of the error
    var errorString = '[' + error.plugin + ']';
    errorString += ' ' + error.message.replace("\n",'\n'); // Removes new line at the end - Q nope

    // If the error contains the filename or line number add it to the string
    if(error.fileName)
        errorString += ' in ' + error.fileName;

    if(error.lineNumber)
        errorString += ' on line ' + error.lineNumber;

    // This will output an error like the following:
    // [gulp-sass] error message in file_name on line 1
    console.error(errorString);
}


// Lint Task
gulp.task('lint', function() {
    return gulp.src('library/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// Compile Our Sass
gulp.task('sass', function() {
    gulp.src(paths.styles.files)
    .pipe(sass({
        // outputStyle: 'compressed',
        sourceComments: 'map'
        // includePaths : [paths.styles.src]
    }))
    // If there is an error, don't stop compiling but use the custom displayError function
    .on('error', function(err){
        displayError(err);
    })
    // Pass the compiled sass through the prefixer with defined 
    .pipe(prefix(
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
    ))
    // Funally put the compiled sass into a css file
    .pipe(gulp.dest(paths.styles.dest));
    // .pipe(livereload());
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('library/js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

// Watch Files For Changes
gulp.task('watch', function() {
    // livereload.listen();
    gulp.watch('library/js/*.js', ['lint', 'scripts']);
    gulp.watch('library/scss/**/*.scss', ['sass'])
    .on('change', function(evt) {
        console.log(
           '[watcher] File ' + evt.path.replace(/.*(?=sass)/,'') + ' was ' + evt.type + ', compiling...'
        );
    });
});

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

[chekit]

I’m faced with the same issue. But in my file structure I’m using node modules, so I’ve just set setTimeout to my require of scss task and it seems to work for me.

For example:

> scss.gulp.js:

'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass');
const notify = require('gulp-notify');

let sassTask = function () {
    return gulp.src('./src/scss/styles.scss')
        .pipe(
            sass()
            .on('error', notify.onError({
         message: "Error: <%= error.message %>",
             title: "Error in Sass"
        }))
        )
        .pipe(gulp.dest('./dist/css/'));
}

module.exports = sassTask;

> watch.gulp.js:

'use strict';

const gulp = require('gulp');
const watch = require('gulp-watch');

const paths = {sass:    './src/scss/**/*.scss'};
gulp.task('watch', function () {
  watch(paths.sass, () => setTimeout(require('./scss.gulp'), 400));
});

[broject]

timeout is very best! now @import Error: File to import not found or unreadable: IS SOLVED my simple is 👍

var admin_css_task = function () { config.sass.includePaths = _adminSassInc; gulp.src(_adminSassMain) .pipe(sass(config.sass)) .pipe(gulp.dest(_adminCssDest)); }; gulp.task(‘admin-css’, admin_css_task);

gulp.task(‘watch’, function () { gulp.watch(_adminSass, function () { setTimeout(function () { admin_css_task(); }, 500); }); }); gulp.task(‘run’, [‘admin-css’, ‘watch’]);