Vue3 + Vite: Is there a way to let vue scoped style transform result from data-v-foo attributes to hash classname

Question

I know that vue.js will transform following SFC:

<template>
<div class="example">123abc</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

into:

<template>
<div class="example" data-v-foo>123abc</div>
</template>

<style scoped>
.example[data-v-foo] {
  color: red;
}
</style>

Is there a way to let vue scoped style transform result from data-v-foo attributes to hash classname?

just like:

<template>
<div class="f6545c">123abc</div>
</template>

<style scoped>
/* ↓ hashed classname */
.f6545c {
  color: red;
}
</style>

I'm using latest version of Vue3 & vite. Thank you!

Answer 1

I think you're looking for css-modules.

You won't have to use the <style> block in SFC, but instead create a button.module.css file that you can import in your components.

With vite, you can configure them like this: (see docs)

// vite.config.js
module export {
  rollupPluginVueOptions: {
    cssModulesOptions: {
      generateScopedName: '[hash:base64:8]',
    },
  },
}

<template>
  <button :class="[style.btn]">Styled button</button>
</template>

<script>
import style from './button.module.css'

[...]
</script>