VS Code and Gulp-Sass: The Forbidden Combo
The Problem:
I am receiving an error in my Git Bash terminal whenever I run gulp sass to try to save my scss changes to css. It prevents the css file from being written accurately and the site from looking like it should in the browser. It seems the compiler cannot find, or finds unreadable, any and all of the files to be imported in my main.scss.
The Causes:
I was advised that the problem is that my editor (VS Code) isn't doing atomic writes and therefore node-sass is detecting a change and is reading the file before it's completely written. In sublime you can turn on atomic writes, but there is no such luck with VS Code. The only solution is having node-sass apply a delay before it reads the file to allow VS Code to write it completely. That's a feature suggestion on github that they're going to add at some point (e.g. --delay 500 (ms)).
The Solutions:
If you're using sublime, try setting atomic write to true and it shouldn't throw it. If you've got SDD drives, move your project files there; the extra speed should do the trick. Finally, if you don't have (or don't want to use) either:
1) It appears Marcos has written a temporary work around by modifying a node-module file responsible for the conversion: https://github.com/sass/node-sass/issues/1788#issuecomment-390272046
2) You could set up a gulp task series for the SCSS-CSS conversion, and use gulp-wait to create the necessary delay: https://www.npmjs.com/package/gulp-wait
I hope this helps someone!
Written by Sebastian Neferu
Related protips
1 Response
Good post!