You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hey everyone,
When using the built-in CSS Modules feature of vue with vite, the generated class names of SFCs do not behave as expected.
Expected
The way it used to be with vue+webpack out of the box and the way CSS modules are designed to work, generated class names should look like this by default: [moduleName]_[className]_[hash]
e.g. for class mainButton in the <style module> section of pageHeader.vue pageHeader_mainButton__active_h6fhX
Actual
But for some reason, the moduleName part is ommited when using vite, making classes look like this: _[className]_[hash]
e.g. _mainButton__active_h6fhX
While classes are still technically scoped through the hash value, this should not be the default behavior of CSS Modules.
Why is this different now in vite?
Recreate
Open the stackblitz demo, let it render and inspect the <img> tag's generated class names.
What I have tried
Of course I have tried to configure the css.module.generateScopedName option of the vite.config.ts to recreate the default behavior as described in the docs: generateScopedName: "[name]__[local]___[hash:base64:5]"
But the "name" part then renders to this abomination: App-vue-vue-type-style-index-0-lang-module
insted of just App
I have tried other configurations found on stackoverflow etc. but I have yet to find a working solution.
I don't think this classifies as a bug, so I opened a discussion instead of an issue.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hey everyone,
When using the built-in CSS Modules feature of vue with vite, the generated class names of SFCs do not behave as expected.
Expected
The way it used to be with vue+webpack out of the box and the way CSS modules are designed to work, generated class names should look like this by default:
[moduleName]_[className]_[hash]
e.g. for class
mainButton
in the<style module>
section ofpageHeader.vue
pageHeader_mainButton__active_h6fhX
Actual
But for some reason, the
moduleName
part is ommited when using vite, making classes look like this:_[className]_[hash]
e.g.
_mainButton__active_h6fhX
While classes are still technically scoped through the hash value, this should not be the default behavior of CSS Modules.
Why is this different now in vite?
Recreate
Open the stackblitz demo, let it render and inspect the
<img>
tag's generated class names.What I have tried
Of course I have tried to configure the
css.module.generateScopedName
option of thevite.config.ts
to recreate the default behavior as described in the docs:generateScopedName: "[name]__[local]___[hash:base64:5]"
But the "name" part then renders to this abomination:
App-vue-vue-type-style-index-0-lang-module
insted of just
App
I have tried other configurations found on stackoverflow etc. but I have yet to find a working solution.
I don't think this classifies as a bug, so I opened a discussion instead of an issue.
Thanks for any help.
Beta Was this translation helpful? Give feedback.
All reactions