官方文檔地址,更多關(guān)于Scoped CSS的內(nèi)容
在很多vue的組件庫(kù) , 如vant浴鸿，elementUI， iview等都可能自定義一些樣式文件
項(xiàng)目中用到了 elementui弦追，如果使用預(yù)處理器 scss, sass,less , 修改樣式可能修改不掉, 而且這種需求出現(xiàn)的頻率非常高岳链。但如果去掉scoped話又會(huì)影響全局樣式。當(dāng)然我們知道可以使用 樣式穿透的方式操作
那么究竟什么時(shí)候使用 >>> 什么時(shí)候使用 /deep/ 和 ::v-deep 實(shí)際操作中會(huì)有什么問(wèn)題呢?
1劲件、>>>
如果項(xiàng)目使用的是css 原生樣式,那么你可以直接使用 >>> 穿透修改
<style scoped>
/*編譯前*/
.a >>> .b {
/* ... */
}
/*編譯后*/
.a[data-v-f3f3eg9] .b { /* ... */ }
</style>
2掸哑、/deep/
項(xiàng)目中用到了預(yù)處理器 scss 约急、sass、less 操作符 >>> 可能會(huì)因?yàn)闊o(wú)法編譯而報(bào)錯(cuò) 苗分⊙岜危可以使用 /deep/
注意：vue-cli3以上版本不可以
<style lang="scss" scoped>
/*用法1*/
.a {
/deep/ .b {
/* ... */
}
}
/*用法2*/
.a /deep/ .b {
/* ... */
}
</style>
3、::v-deep
如果使用了預(yù)處理器都可以使用 ::v-deep
<style lang="scss" scoped>
/*用法1*/
.a{
::v-deep .b {
/* ... */
}
}
/*用法2*/
.a ::v-deep .b {
/* ... */
}
</style>
4摔癣、:deep(<inner-selector>)
[@vue/compiler-sfc]::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.
::v-deep 用作組合器已被棄用奴饮。 使用 :deep(<inner-selector>) 代替。
