Heading

Vue单文件组件中，style标签scoped 属性 会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover。

使用scoped的情况下，当引入第三方组件库时，需要在局部组件中修改第三方组件库的样式，可以使用以下方法穿透scoped:
其中wrapper为外层样式，some-style为目标样式

• >>> CSS、Stylus

.wrapper >>> .some-style{
    color:red;
}

• /deep/ CSS、Less、Scss

.wrapper /deep/ .some-style{
    color:red;
}

• ::v-deep CSS、Less、Scss

.wrapper ::v-deep .some-style{
    color:red;
}

参考

• Vue-loader (opens new window)