scoped看起來很好用,當時在Vue項目中,當我們引入第三方組件庫時(如使用element-ui),需要在局部組件中修改第三方組件庫樣式,而又不想去除scoped屬性造成組件之間的樣式覆蓋。這時我們可以通過特殊的方式穿透scoped
- 1、stylus的樣式穿透 使用 >>>
.wrapper >>> .swiper-pagination-bullet-active
background: #fff
- 2、sass和less的樣式穿透 使用 /deep/
// 語法
外層 /deep/ 第三方組件 {
樣式
}
// eg
.wrapper /deep/ .swiper-pagination-bullet-active{
background: #fff;
}