Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Class names hydration mismatches when using SSR and SCSS styles with module  #477

Copy link
Copy link
Closed
vuejs/core
#12450
vuejs/core#12450
@Gwynerva

Description

@Gwynerva
Issue body actions

Describe the bug

Without module attribute on <style> Vue SSR 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.

Reproduction

https://stackblitz.com/edit/github-bea9um

Steps to reproduce

Just create an external .scss file, define any mixin and then @include that mixin in any .vue file <style lang="scss" module> tag.
Changing the .scss fill will break all files that @use this style file.

System Info

Everywhere

Used Package Manager

npm

Logs

No response

Validations

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

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.