Vue3 + Vite：有没有办法让 vue 作用域样式将结果从 data-v-foo 属性转换为哈希类名

Question

我知道vue.js会转换以下SFC:

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

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

进入：

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

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

有没有办法让 vue 作用域样式将结果从 data-v-foo 属性转换为哈希类名？

就像：

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

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

我使用的是最新版本的 Vue3 & vite。谢谢！

Answer 1

我想你正在寻找 css-modules。

您不必在 SFC 中使用 <style> 块，而是创建一个可以导入组件的 button.module.css 文件。

使用 vite，您可以像这样配置它们：（参见 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>

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