Cache isn't refreshed when multiple linked @use is used across more than 2 files.@snowpack/plugin-sass

[IsSkyfalls]

I tried rephrasing this multiple times but I guess I'm just bad at writing English. Sorry in advance.

How to reproduce:

1. create a.scss, b.scss, c.scss
2. put @use "b"; in a.scss and @use "c"; in b.scss.
3. run the dev server
4. change the content in c.scss and save

The change is detected and the HMR message is sent to the browser. But since the cache isn't being invalidated nothing will be rebuilt until you update a.scss or b.scss.
The cache is persisted so simply restarting isn't going to fix the problem. You'll have to run snowpack dev --refresh to clear the cache.

[segovia94]

I can confirm this bug is happening. I ran into the same problem using snowpack build --watch. Except it happens even at 1 level deep using build --watch. When using snowpack dev it seems that I have to go at least 2 levels deep like this issue stated.

[segovia94]

It appears that only the first level of imports are scanned in dev. So anything below the first level of imports will not trigger a sass compile.

// During development, we need to track changes to Sass dependencies.
if (isDev) {
  const sassImports = scanSassImports(contents, filePath, fileExt);
  sassImports.forEach((imp) => addImportsToMap(filePath, imp));
}

This also likely explains why when using build --watch no dependency changes ever trigger a build since the imports are only scanned during dev. So scanSassImports() needs to be recursive to go more than one level deep. It also should not be within an isDev conditional.

[mrkmiller]

I believe this has been fixed by #2792.

[ffigiel]

I'm having the same problem when referring to parent directory in an import

@import '../common-ui/styles/reset';