Gulp-sass: Watch errors on gulp-sass when saving file

[dirad]

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']);

[Keats]

Have you gone through the faq at https://github.com/dlmanning/gulp-sass/wiki/Common-Issues-and-Their-Fixes ?

[dirad]

Well, before posting i did make sure to update gulp-sass, but not node-sass [it was not more than a month old though]

I just ran an update, but as this error is a bit sporadic, ill have to wait and see.
aaaaand here we go again.. =\

[23:47:54] Finished 'sass' after 2.06 ms
[gulp-sass] library\scss\editor-style.scss
Error: File to import not found or unreadable: partials/normalize
       Parent style sheet: stdin
        on line 20 of stdin
>>      @import "partials/normalize";
   -^

[jan-dh]

Have the same problem. Just goes away after a couple of saves and then appears again out of the blue. I have this isue in a main.scss file where I only import other stuff. I don't touch that file an yet now and then it breaks down with the same error.

[rochapablo]

+1

[mintern]

I'm pretty sure that gulp.watch will happily start working on files while they are in the process of being modified. I have a gulp.watch task that copies images to dist from a source directory, and I noticed that when I used convert to write processed images directly to my source directory, the copy in dist would only be the beginning of the image.

This could be a related problem. If your editor is in the process of writing out a file and gulp.watch starts processing it while it is still being written, it would probably cause sporadic problems like this.

[rahulv3a]

I'm facing this issue with Github Atom. It doesn't have 'atomic_save' option like Sublime Text.

Is there any workaround?

[rochapablo]

I read in somewhere that i cannot remember, but in my case the problem was set to gulp-sass .css files, so i just had to remove them.

@rahulnever2far, But I guess that is not what are you looking for.

[pccjamie]

+1

[tuelsch]

Might be related to #426 and #425

[xzyfer]

Unfortunately this issue an issue with gulp.watch and is out of our control. In my experience the issue get's better if you watch less files i.e. exclude bower_components and node_modules.

[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']);