Vue组件中使用style scoped样式失效的问题

在开发项目中遇到在组件中添加样式不生效的情况。查找资料发现是因为style标签添加了scoped属性的原因。具体如下

<style scoped> 
  //样式添加了scoped
 
  .box{
  color:red;
  }
  .text{
  color:blue;
  }
</style>

浏览器渲染后：

//style
.box[data-v-33f8ed40]{
color:red;
}
 
.text[data-v-33f8ed40]{ //样式不生效，因为p标签里没有属性data-v-33f8ed40
color:blue;
}

去掉 style 的 scoped 属性即可。