node-sass --watch outputting empty CSS files

[andrewulm]

• NPM version (npm -v): 5.0.3
• Node version (node -v): v8.1.2
• Node Process (node -p process.versions): { http_parser: '2.7.0', node: '8.1.2', v8: '5.8.283.41', uv: '1.12.0', zlib: '1.2.11', ares: '1.10.1-DEV', modules: '57', openssl: '1.0.2l', icu: '59.1', unicode: '9.0', cldr: '31.0.1', tz: '2017b' }
• Node Platform (node -p process.platform): Linux
• Node architecture (node -p process.arch): x64
• node-sass version (node -p "require('node-sass').info"): node-sass 4.5.3 (Wrapper) [JavaScript] libsass 3.5.0.beta.2 (Sass Compiler) [C/C++]
• npm node-sass versions (npm ls node-sass): [email protected] /home/vagrant/halfpricebanners/angular4 ├─┬ @angular/[email protected] │ └── [email protected] deduped └── [email protected]

---

Recently, i've been experiencing valid code being outputted to my CSS file as 0 bytes, no data.

But sometimes, if I change a value of any property, it will output a the CSS fine.

node-sass --watch sass/basic-pages.scss css/basic-pages.css --output-style compressed

The SCSS: basic-pages.scss.txt

I've ran this through many validators with no errors, shown colleagues for review if I missed something obvious, with no luck.

Please let me know your thoughts. Thanks!

[andrewulm]

Supplemental example

First State .img-background selector wrapper added, CSS file has data

Second State Removed .img-background selector, CSS file is empty

[andrewulm]

Further testing:

Seems that when I manually run node-sass sass/basic-pages.scss css/basic-pages.css --output-style compressed The output is fine, consistently.

This may be a problem with --watch flag.

[venerated]

Experiencing the same. Problem is intermittent. Only happens when using watch flag, manual compilation works fine.

[niklaz]

I actually have issues even without --watch flag

[tcasey]

I'm also running into this issue without the --watch flag

[svda]

Same here, happening with 4.11.0 against node 10.13.0.

[daniel-algauer]

No more updates on this issue? I'm getting blank css files as well. I tried to update everything, reboot and nothing. Looks like some files are ok and others don't. I'm trying to simulate some cenários.

[saper]

To have a look at it, I'd like to have a small repository to reproduce the issue consistently.

Please also say what kind of Linux system is this exactly, it would be also good to know what kind of filesystem are you on. It can also be helpful to know what editor are you using to make the changes.

Do not include screenshots, please provide text.

Watching a filesystem is not an easy issue, there are lots of moving parts.

Can you reproduce this outside of the machine provisioned by vagrant?

[EgleKat]

I'm also experiencing issues with --watch flag, sometimes compiles into empty css, although is fine, when I run it manually. However, I am using node-sass-chokidar. I am using elementary OS 5.1.4 Hera and VSCode editor. filesystem - Ext4. I am not using Vagrant.

[yaskevich]

The same issue is on Ubuntu 18.04.4 LTS, ext4, Node v13.14.0

[saper]

Can everybody affected confirm they are using Visual Studio Code?

[EgleKat]

Can everybody affect confirm they are using Visual Studio Code?

I am using Visual Studio Code

[adamgreenough]

Experiencing this on an Ubuntu server edited remotely over SFTP (Panic Nova)

[rionalab]

experiencing the same, i think its not vscode, just the watcher hang temporarily...how to handle it is just re-save (ctrl + s) the scss file until it work normally

[SquidwardHill]

I am having the same issue. I'm in VS Code - MacOS Big Sur 11.1. I'm using SSH FS extension on VS Code to load/work on the directory from our Linux Server. The log says its compiling every change (I have autosave on) but more often than not lately its producing an empty CSS file. No error messages. This has just started happening fairly recently.

[adamgreenough]

Replacing node-sass with node-sass-chokidar seems to have fixed this for me. https://www.npmjs.com/package/node-sass-chokidar

[andrewulm]

I'm afraid this issues was so long ago (and jobs ago) any details I could provide from that time would be inaccurate, at best, and a hindrance to your bug testing. I'm sure with the amount of traction this has gotten, the other contributors would be able to answer more specifics to those still having issues with the node-sass module.

I can add to the discussion, that this initial bug came about working in a virtual Linux server environment for offline development. I was using MacOS to load up Virtual Box with the specific Linux settings/image for the project, but the details I'm afraid I can't provide.

[daveyjones]

I'm also experiencing this issue. This is the command I'm using:

sass --watch main.scss main.css

The first time I save it works great. Every subsequent save results in an empty main.css file. I'm saving files over SFTP using Panic's Nova editor. Switching to node-sass-chokidar did not fix it for me. I'm assuming this has something to do with the way Nova (and other editors) are saving files over SFTP...

[daveyjones]

The problem is also described here: https://stackoverflow.com/questions/35942340/sass-watch-command-compiles-scss-files-before-full-sftp-upload

This is because, when the file upload takes time, sass compiles the scss file (on the server) before it is fully uploaded to the remote folder. Thus, it only compiles part of the file, resulting in css errors.

I'm pretty sure this is what's going on. I think we need an option to add a delay to the watch to account for file upload time when working remotely over SFTP.

[adamgreenough]

Any progress on this? Still happening. A delay on watch sounds like it would solve it, the theory that it is the latency between uploading the file contents to a remote server and the compilation seems likely.

[adamgreenough]

Fixed with npm-watch and a delay with that for now :) https://www.npmjs.com/package/npm-watch