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

I know that vue.js will transform following SFC:

<template>
<div >123abc</div>
</template>

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

into:

<template>
<div  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 >123abc</div>
</template>

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

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

CodePudding user response：

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 :>Styled button</button>
</template>

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

[...]
</script>