Watch not watching all files?

[Luuk1983]

I recently asked how the watch should work: #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.

[KunalTanwar]

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"
]
}
}

[KunalTanwar]

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.

[KunalTanwar]

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?