This question has already been answered:

The point is trivial: when compiling a main.sass file that lists inclusions to other sass files, the sass task does not compile into main.css, because it cannot find it.

That is, only the following is written in main.css:

@import "hello";

Well, hello has standard sass styles.
But if you save via Ctrl + S and "update" the file, then the service will start the task and everything will compile safely. This happens once in 10 cases, for example, if you just press Ctrl + S all the time, but nobody does it, but the error occurs during real work, which is very frustrating.

Is saving the hello file (in which I write styles) slower than tracking and compiling sass in gulp? Or, I do not understand at all what could be the error ...

Reported as a duplicate member of Spirit Community ♦ Feb 25 '17 at 13:16 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

    1 answer 1

    Is saving the hello file (in which I write styles) slower than tracking and compiling sass in gulp? Or, I do not understand at all what could be the error ...

    This is exactly what happens, and this problem is typical mainly for win7 and HDD. When replacing the HDD to SDD everything will be fine. But to change the disc because of this .... In my opinion is not the best idea.
    There are at least 3 options for fixing the problem:
    1. It assumes a good understanding of Node.js , as well as the work of node-sass and libsas , which actually compile the files.
    Its essence lies in writing your own handler of the included files. If you look at the documentation for node-sass , you can see in the options object the key importer , which is actually a user-defined function. When LibSass meets the @import directive. A custom importer allows you to extend the LibSass engine LibSass both synchronous and asynchronous mode.
    2. This method is based on a small hack in the watch task and comes down to adding a timer to perform the sass task:

     gulp.task('watch', function() { watch('dev/scss/**/*.scss', function(event, cb) { setTimeout(function(){gulp.start('sass');},500) // задача выполниться через 500 миллисекунд и файл успеет сохраниться на диске }); });

    Here I used the gulp-watch plugin, but I think it will work with the standard galp watch too.
    3. Using exactly the gulp-watch plugin, it takes as a second parameter an object with options, among which there is a delay equal to 10 milliseconds by default.

     gulp.task('watch', function() { watch('dev/scss/**/*.scss', {readDelay: 100}, function(event, cb) { gulp.start('sass'); }); });

    More information can be found in the documentation.

    • Thanks for the answer. The second method was quite enough , setting the delay to 100 milliseconds. - VostokSisters