SCSS file changes trigger full page reload instead of HMR

[aralroca]

Astro Info

Astro                    v5.14.3
Vite                     v6.3.6
Node                     v22.14.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  @astrojs/node (v9.4.4)

If this issue only occurs in one browser, which browser is a problem?

Chrome

Describe the Bug

When modifying .scss files during development, Astro triggers a full page reload instead of hot module replacement (HMR). This disrupts the development workflow as it loses current state and scroll position.

If I write:

 if (import.meta.hot) {
     import.meta.hot.on('vite:beforeFullReload', (payload) => {
       console.log(payload);
     })
}

After save a .scss file, this log appears:

{type: 'full-reload'}

What's the expected result?

Changes to .scss files should trigger CSS-only hot updates without a full page reload.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-f9txtpa5?file=src%2Fcomponents%2FExample.module.scss

Participation

• I am willing to submit a pull request for this issue.

[id-87]

@aralroca Please assign me this issue.

[aralroca]

Of course, thanks @id-87

[aralroca]

@id-87 I cannot assign you, probably some of the Astro maintainers can do it @matthewp @FredKSchott @natemoo-re

[danivicario]

This is an important issue in the project I am working on, as this bogs you down a lot while implementing the figmas or experimenting.

Thank you mr @aralroca for raising this, hoping the astro team kindly can solve this issue @id-87

🙏

[florian-lefebvre]

Interesting, the scss is correctly invalidated but then we actually force a full reload here: https://github.com/withastro/astro/blob/main/packages/astro/src/vite-plugin-hmr-reload/index.ts#L30. Probably need to fix the logic above

[aralroca]

Interesting, the scss is correctly invalidated but then we actually force a full reload here: https://github.com/withastro/astro/blob/main/packages/astro/src/vite-plugin-hmr-reload/index.ts#L30. Probably need to fix the logic above

It seems to come from somewhere else. I've added a similar plugin to Astro:

https://stackblitz.com/edit/github-f9txtpa5?file=astro.config.mjs

After saving the .scss file, hasSsrOnlyModules is false and modules is [].

[florian-lefebvre]

I'm sure it comes from the place I linked as I tried it locally (at least with the provided minimal reproduction). Let's figure this out first and then we can look into other places where this could occur if the problem is still there

[ignacioroan]

Have the same issue in my current project. Will be cool to have it solved, the page reload is a bit annoying :(

[aralroca]

Adding

if (clientModule.invalidationState === 'HARD_INVALIDATED') continue;

Fixes the issue. No idea about this invalidationState, it's not typed in Astro but exists in the module. Any idea @florian-lefebvre ? Thanks

[florian-lefebvre]

Not at all, I don't know this area well. Feel free to send a PR!