Vue深度作用选择器，挣脱Scoped束缚

当<style>标签有scoped 属性时，它的 CSS只作用于当前组件中的元素。

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

<template>
  <div class="example">hi</div>
</template>

转化结果为

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

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式

深度作用选择器

如果你希望 scoped样式中的一个选择器能够作用得“更深”，例如影响子组件

1.普通css你可以使用 >>>操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

这样b元素后面就不会再有属性选择器了

2.同样，要是scss可以使用::v-deep操作符：

<style lang='scss' scoped>
::v-deep .a { /* ... */ }
</style>

3.同样，要是less可以使用/deep/操作符：

<style lang='less' scoped>
/deep/ .a { /* ... */ }
</style>

Vue Loader官网