Watch not watching all files?

[Luuk1983]

I recently asked how the watch should work: https://github.com/sass/dart-sass/issues/1666. Based on this information, I'm unable to make the watch work as described there. Maybe I'm missing something, or maybe where is a bug somewhere so I thought I'd explain my example.

I'm running Sass 1.49.9.

My file structure is:

build (folder)
--- sass (folder)
------Test (folder)
--------- _partial.scss
------example.scss

_partial.scss contains some test stuff:

$example-color:green;
input {
background-color:orange;
font-size:1.5rem;
}

example.scss contains:

@use "test/partial" as p;

body {
background-color: red;
color: p.$example-color;
}

I created an NPM script to start the watch:

"watch": "sass --watch build/sass:wwwroot/public/css"

Now when I run the script, the watch starts without problems and when I change something in the example.scss file, it will immediately recompile. However, when I make changes to _partial.scss, it will not pick up on the changes and not recompile the example.scss.

Even worse, when I change something in _partial.scss and it doesn't compile, when I then change something in example.scss, it will compile example.scss, but the changes done to _partial.scss that were done before are not reflected in the recompiled example.scss. Maybe it doesn't consider _partial.scss changed or something?

So I'm puzzled thy this is not working because it's such a simple example and you're posts suggests this should work. Thank you for your reply in advance once again.

[KunalTanwar11]

try using this

{
  "watch": "sass build/*.scss -w public/css/"
}

Also, did you install JavaScript compiled version of dart-sass via npm or you are using the dart version?

[Luuk1983]

@KunalTanwar I simply installed sass via npm:

npm install sass --save-dev

So it's the javascript version.

Also running this script: sass build/sass/*.scss -w wwwroot/public/css/ gives an error: Error reading build*.scss: no such file or directory.

[Luuk1983]

For the completeness, this is the file structure:

And this is the complete packages.json:

{ "scripts": { "build-sass": "sass build/sass:wwwroot/public/css", "postbuild-sass": "postcss wwwroot/public/css/.css -u autoprefixer", "build-production-sass": "sass build/sass:wwwroot/public/css", "postbuild-production-sass": "postcss wwwroot/public/css/.css -u autoprefixer cssnano -r --no-map", "watch-sass": "sass --watch build/sass:wwwroot/public/css", }, "devDependencies": { "@rollup/plugin-node-resolve": "^13.2.0", "autoprefixer": "^10.4.4", "cssnano": "^5.1.5", "postcss-cli": "^9.1.0", "sass": "^1.50.0" }, "-vs-binding": { "ProjectOpened": [ "watch-sass" ] } }

[KunalTanwar11]

For the completeness, this is the file structure:

And this is the complete packages.json:

{
  "scripts": {
    "build-sass": "sass build/sass:wwwroot/public/css",
    "postbuild-sass": "postcss wwwroot/public/css/.css -u autoprefixer",
    "build-production-sass": "sass build/sass:wwwroot/public/css",
    "postbuild-production-sass": "postcss wwwroot/public/css/.css -u autoprefixer cssnano -r --no-map",
    "watch-sass": "sass --watch build/sass:wwwroot/public/css"
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^13.2.0",
    "autoprefixer": "^10.4.4",
    "cssnano": "^5.1.5",
    "postcss-cli": "^9.1.0",
    "sass": "^1.50.0"
  },
  "-vs-binding": {
    "ProjectOpened": ["watch-sass"]
  }
}

I think in your build-sass command you need to provide the file name also then your script will be like this

"build-sass": "sass build/sass/example.scss wwwroot/public/css"

then you will import your _partial.scss from Test folder and it will work just fine.

example.scss

@import './Test/partial';

// rest of your code

FYI - You should have opened this issue in sass repo because npm install sass installs typescript version not the dart-sass.

[Luuk1983]

Hi @KunalTanwar, thanks for the effort to reply :)

Let me address your remarks:

• Yes you can supply a file name, but it's not required because you can also supply a folder instead of a file. I did a test with both to be sure, but the result is exactly the same: when the example.scss file is saved, it's immediately regenerated. But when the _partial.scss is updated, it doesn't do anything.
• I didn't know they were seperate repos, good to know :) I also tried the Dart VM in combination with the sass-embedded plugin, but the result is exactly the same.
• @import is deprecated, that's why I use @use. However, I also tested @import, just to be sure. It doesn't make a difference.

[KunalTanwar11]

Hey @Luuk1983 first of thanks for informing me about @use. Also, can you also post an image of how you're using _partial.scss in your example.scss.

[jathak]

Sorry for the delay on responding to this. I notice that the directory itself is called Test while you refer to test in your @use URL. Does it work when the cases match?

[MonsieurMan]

Hello everyone,

I ran into the same issue today and hard a time finding the bug. I made a repro just to be sure, you can see it here : https://gitlab.com/monsieurman/dart-sass-not-watching-test.

In our build, we have partial files contributed by a lot of different folders, and they end up compiled in the same file at the end.

The repro does the same but simply, I made an automatic test case (test.js) which you can see run here : https://gitlab.com/monsieurman/dart-sass-not-watching-test/-/jobs/6869352619

---

This leads to the question, is wanted the watch does not look at dependencies, or is it something you'd want to fix?

Thanks

[nex3]

@MonsieurMan It is intentional that --watch only watches files that are specified on the command line either as input files or as --load-paths. Trying to determine what to watch just based on what the files load in practice is much more complicated, because it requires dynamically creating and destroying directory watchers based on the changing contents of all the files being compiled.

[MonsieurMan]

Very clear response, thanks! You also pointed to the fact we can just use --load-path to achieve watching other dirs. I updated the repro with a fix for the sake of it.

Edit: I could've read the doc more thoroughly, it's already written here that the watch does not look for @import, @use, etc, and watch for load-path.