search

sass / dart-sass

The reference implementation of Sass, written in Dart.
https://sass-lang.com/dart-sass
MIT License
3.9k stars 352 forks source link

Watch flag watches non-sass files #1377

Open mattrunyon opened 3 years ago

mattrunyon commented 3 years ago

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

  1. 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.

  2. 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.

Awjin commented 3 years ago

Does this behavior also happen if you run Sass directly from the command line?

mattrunyon commented 3 years ago

We are running Sass using the CLI included with the NPM package

Awjin commented 3 years ago

I misspoke there—does this happen with the standalone version?

mattrunyon commented 3 years ago

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.

julrich commented 2 years ago

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).