dart-sass
dart-sass copied to clipboard
Watch flag watches non-sass files
We're using the Sass CLI to watch and recompile files in several package in a monorepo. Using the --watch flag appears to make the CLI watch every file in a directory (on Linux at least). We also need a few sass imports from node_modules. This is the command we're using
sass --update --watch --load-path=./node_modules/ ./src:./dist
The problem is on Linux at least, this watches every file in node_modules and every file in src. In our case it was generating 100k file watchers for 6 or 7 packages resulting in 500k+ watchers.
Check the number of watched files (from StackOverflow. Inspect yourself before running):
curl -s https://raw.githubusercontent.com/fatso83/dotfiles/master/utils/scripts/inotify-consumers | bash
System Info
Ubuntu 20.04.2 LTS Node v12.21.0 Sass 1.32.13 compiled with dart2js 2.12.4 chokidar-cli: 2.1.0 chokidar: 3.5.2
Workaround
Our current workaround is to remove the need for load-path by importing via the relative path inside our sass files. This reduces the number of watchers to just the number of files in src which is manageable, but still a bug that it watches everything.
It's also annoying needing to provide relative paths to the node_modules folder for any import from it.
Proposed Solutions
- Only watch sass and related files. From inspecting the code a bit it seems a dependency graph is generated and that is what is supposed to be watched. Not sure if it's a problem creating the graph or if it is being passed incorrectly to chokidar.
- #616 in theory should also provide a fix for this problem. Assuming the files from the globs are the only things that will be watched.
Does this behavior also happen if you run Sass directly from the command line?
We are running Sass using the CLI included with the NPM package
I misspoke there—does this happen with the standalone version?
I tried the latest standalone (1.37.5) release on GitHub (download and add to path) and am still getting 13k file watchers with 22 scss files in src and 146 in load-path (only using 3 or 4 in the load-path, but all of node_modules contains 146 scss files)
If I remove the load-path argument (I get build errors for some files requiring the base scss from load-path), then I get a reasonable 9 file watchers
This test was using WSL2 using the Ubuntu 20 image.
This explodes for us, too. Unfortunately breaking Hot Reload almost immediately.
We need some (very select!) dependencies from node_modules
(like Bourbon
), for which so far we've used --load-path=node_modules
. With the mentioned result of way too many watchers being registered.
I often see whitelists and blacklists for that use-case, I think that could solve this partially (not sure about non-scss files being watched, though... that doesn't seem sensical, either).
E.g. Webpack
:
https://webpack.js.org/configuration/module/#ruleexclude
https://webpack.js.org/configuration/module/#ruleinclude
Or rsync
: https://linuxize.com/post/how-to-exclude-files-and-directories-with-rsync/
Should probably add, I'm on Arch Linux
, with file watchers configured to the possible max (~520k).