官網介紹: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 就沒有了。
所以,如果你期待通過如下方式修改 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>
或者
.fuck{
&::v-deep .weui-cells{
// ...
}
}