#6662·taro

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 只在该组件内有效

xml
<style scoped>
  .red {
      color: red
  }
</style>

内部原理是,这个可选 scoped 属性会自动添加一个唯一的 属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域,编译的时候 .red 会被编译成类似 .red[data-v-21e5b78]

H5模式下dom生成了[data-v-xxx]属性

image

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

image

期望行为

在微信小程序中正常

系统信息

Taro v3.0.0-rc.4

如果您有功能上的建议,可以提到 FeatHub

使用上的问题,欢迎在「Taro 社区」一起交流