传送门:https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html
你很可能会遇到的问题
vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局,但如果你引用了第三方组件:
默认只会对组件的最外层(div)加入这个 [data-v-xxxx] 属性,但第二层开始就没有效果了。如图所示: 第一层还有 data-v-17bb9a05, 但第二层的 .weui-cells 就没有了。
(这是 <group />组件的源码: https://github.com/airyland/vux/blob/v2/src/components/group/index.vue )
所以,如果你期待通过如下方式修改 weui-cells 的样式。是没有任何效果的:
<style scoped>
.fuck .weui-cells {
// ...
}
</style>
这是因为,所有的scoped中的css最终编译出来都会变成这样:
.fuck[data-v-17bb9a05] .weui-cells[data-v-17bb9a05]
解决方法一:除非你将 scoped 移除,或者新建一个没有 scoped 的 style(一个.vue文件允许多个style)
<style scoped>
.fuck {
// ...
}
</style>
<style>
.fuck .weui-cells {
// ...
}
</style>
解决方法二:深度作用选择器 >>>
(注意,只作用于css)
.fuck >>> .weui-cells {
// ...
}
但如果是sass/less的话可能无法识别,这时候需要使用 /deep/ 选择器。
<style lang="scss" scoped>
.select {
width: 100px;
/deep/ .el-input__inner {
border: 0;
color: #000;
}
}
</style>
深度作用选择器
如果你希望 scoped
样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>>
操作符:
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代码将会编译成:
.a[data-v-f3f3eg9] .b { /* ... */ }
有些像 Sass、Less、Scss 之类的预处理器无法正确解析 >>>
。这种情况下你可以使用 /deep/
操作符取而代之——这是一个 >>>
的别名,同样可以正常工作。