vue项目中/deep/的用法-vue-cli中没法覆盖样式解决方法

在vue-cli项目中，我们在二次覆盖样式的时候会遇到这个问题，就是在控制样式的时候，复制了类名，但是设置了样式会没有。

解决方式：在样式前面加一个 /deep/

<style lang="less" scoped>
.Home-container {
  padding: 46px 0 50px 0;
  .van-nav-bar {
    background-color: #007bff;
    color: white;
  }
  // 需要加 /deep/ 才能控制到它
  /deep/ .van-nav-bar__title{
  color: white;
  }
}
</style>

具体可以总结如下图： 

/deep/ 样式穿透

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。

如果想让某些样 式对子组件生效，可以使用 /deep/ 深度选择器。

注意：/deep/ 是 vue2.x 中实现样式穿透的方案。在 vue3.x 中推荐使用 :deep() 替代 /deep/。