1

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:

> project@1.0.0 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.

Lurco
  • 199
  • 1
  • 2
  • 12

1 Answers1

0

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.

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

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

  3. Run wsl --set-version UbuntuWEBSTORM 1 to change this distro to WSL 1.

  4. Perform any initialization and customization I need for that particular distro (e.g. installing nvm, nodejs and npm come to mind).

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

Lurco
  • 199
  • 1
  • 2
  • 12