8000 Style SCSS + module class names hydration mismatches · Issue #29917 · nuxt/nuxt · GitHub
[go: up one dir, main page]

Skip to content
Style SCSS + module class names hydration mismatches #29917
@Gwynerva

Description

@Gwynerva

Environment

Clean install with Nuxt v3.14.159 and sass or sass-embedded package installed.

Reproduction

Live Reproduction

Try to change foo mixin in styles/default.scss file: add or remove rules inside it.
On each change you will see that app.vue is not updated, page reload is not helping and it error hydration mismatches.

It works again if you manually change .vue file.
But it will break if you again change the .scss file.

Describe the bug

Without module attribute on <style> Nuxt correctly handles updates to .scss files that are imported via @use ... at-rule.
However, with module attribte it fails to watch changes to style files or something else breaks with hydration mismatches related to hashed class names so only making manual changes to .vue file will re-sync the updates.

It is also not related to flexible path options when using @use. The bug occurs no matter how you use style files: with .scss extension and without it, omitting _ at the beginning or not.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      0