I have a bunch of seperated .scss partials and components, all imported to my main.scss file. Using npm's (ver. 9.2) sass (ver. 1.56) I can compile the entire project no problem with sass ./assets/scss/main.scss ./assets/css/style.css command ran as an npm script.
The same command with the --watch flag should keep track of changes in scss files and recompile accordingly. However despite displaying the right message:
> [email protected] sass
> sass --watch ./assets/scss/main.scss ./assets/css/style.css
Sass is watching for changes. Press Ctrl-C to stop.
the compiler doesn't notice any changes done to the scss files, and that includes the target main.scss.
I use WebStorm IDE on Windows 10 with the WSL 2 Ubuntu 22.04.1 for Node and npm. It seems this issue is unique to my setup as my collaborators in this project have sass --watch working just fine.
What could I do to trace the source of the issue?
Issues with SASS watch pop up a lot with a bit of googling but they mostly seem to be related to the (now deprecated) ruby implementation of SASS and the proposed fixes are as well, e.g.:
sass --watch not updating after initial launch (sass 3.1.16)
which is why I decided to ask yet another question about his issue, hopefully the different circumstances provide this post with enough utility to not be closed on sight.
I turns out the issue is entirely related to WSL, or more specifically WSL 2 (source). In spirit of passing on The Wisdom of The Ancients I decided to submit an answer with my workaround, even though I don't expect the issue will be solved sooner or later by the WSL team since even their own guides recommend using a Hot Reload frameworks through WSL.
So anyway my solution was to create a fresh, lean dedicated WSL 1 Ubuntu distribution specifically for Webstorm.
Download the current Ubuntu LTS from https://cloud-images.ubuntu.com/wsl (e.g. here 23.04 LTS):
curl https://cloud-images.ubuntu.com/wsl/lunar/current/ubuntu-lunar-wsl-arm64-wsl.rootfs.tar.gz
Import it as a new WSL distribution (in Powershell, but WSL works just as well):
wsl --import UbuntuWEBSTORM c:\WSLstorage\UbuntuWEBSTORM ubuntu-lunar-wsl-amd64.rootfs.tar.hz
Run wsl --set-version UbuntuWEBSTORM 1 to change this distro to WSL 1.
Perform any initialization and customization I need for that particular distro (e.g. installing nvm, nodejs and npm come to mind).
Setting up in Webstorm's Settings>Tools>Terminal the path for the Terminal as:
C:\Windows\System32\wsl.exe -d UbuntuWEBSTORM
Works great with SASS compiler, React or any other Hot Reload environment I used it with.