Miserlou
🐛 BUG: Imported SCSS does not recompile on change when using HMR
What version of astro are you using?
1.0.0-beta.27
Are you using an SSR adapter? If so, which one?
None
What package manager are you using?
npm
What operating system are you using?
Mac
Describe the Bug
If I import a SCSS, then modify the imported file, my browser (using HMR) does not update to reflect the changes.
Steps to reproduce
- Open example repo
- Run
npm run dev - Then try changing the contents of
src/scss/use.scssandsrc/scss/import.scss - Observe the preview window does not reflect the changes (although the console does show e.g.
[astro] update /src/scss/use.scss)
As a workaround, if I modify the import_ing_ file (not the import_ed_ file) and save, then it recompiles (or I can just restart the dev server).
Link to Minimal Reproducible Example
https://stackblitz.com/edit/node-wahdub?file=src/pages/index.astro
Participation
- [ ] I am willing to submit a pull request for this issue.
Thanks for opening an issue! Looks like we still have some HMR bugs to track down. I suspect we're not crawling the SCSS imports properly when generating the module graph, which we have to do manually in Astro since we're processing styles outside of Vite.
We'll try to get this prioritized—we know HMR running smoothly is super important to everyone's workflow.
Unfortunately, I can confirm that this issue is still happening on v1.0.0-rc.4. Looks like our recent HMR changes didn't fix this. I'll take a quick look now to see if there's something obvious going on.
For future reference: I was able to get some of this fixed by moving our trackCSSDeps call to happen during transform instead of load. See https://github.com/withastro/astro/commit/9122e9db1a010d7fdc0d16ba6dab7a513a68f82c. There still seems to be a bit of a race condition in the module graph, though, since this only seems to pick up the dependencies as importers on every other file change.
Unfortunately, it looks like we'll be shipping v1.0.0 with this bug. It's high on the list to fix after that!
I faced same issue.
So I'm using JS import in astro frontmatter instead of @use in style tag
(That is to say, my styles are not scoped)
example:
---
import "./style.scss";
---
<div class="class">aaa</div>
// style.scss
@use "./variable.scss";
.class {
color: variable.$color;
}
While I investigating how Astro deals styles, I found that @astrojs/compiler returns only compiled CSS string.
It might be a solution to compile styles in astro instead of @astrojs/compiler .
(Of course, this is a big change... but processing with Vite is likely to make it simple, I think)
Although, this is just an idea. There may be any better solution.
I hope that this problem is solved!
I faced same issue. So I'm using JS
importin astro frontmatter instead of@usein style tag (That is to say, my styles are not scoped)
The global thing is a nice work-around, thanks. It solves some of my styles which wheren't scoped anyway.
For the rest, still have to save both file (the importer and the imported) for change to appear. I was thinking of making a quick hack script for this maybe, as it can be tedious when it adds up. Something that would dummy save siblings astro files, at the OS level.
