taro 3.0 + Vue 中scoped在h5下生效,在微信小程序中无效
Author: XboxYanCreated Jun 15, 2020Updated Sep 2, 2026
LabelsenhancementV-3F-vue2T-weapp
问题描述
taro 3.0 + Vue 中scoped在h5下生效,在微信小程序中无效
复现步骤
Vue 引入了组件作用域的概念,通过在style标签上添加scoped属性,让这一部分 CSS 只在该组件内有效
<style scoped>
.red {
color: red
}
</style>内部原理是,这个可选 scoped 属性会自动添加一个唯一的 属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域,编译的时候 .red 会被编译成类似 .red[data-v-21e5b78]
H5模式下dom生成了[data-v-xxx]属性

微信小程序模式下没有生成[data-v-xxx]属性

期望行为
在微信小程序中正常
系统信息
Taro v3.0.0-rc.4
如果您有功能上的建议,可以提到 FeatHub
使用上的问题,欢迎在「Taro 社区」一起交流
Source: NervJS/taro