Vue 中 css scoped 樣式穿透 ( stylus[>>>] / sass / less[/deep/] )

scoped看起來很好用，當時在Vue項目中，當咱們引入第三方組件庫時(如使用element-ui)，須要在局部組件中修改第三方組件庫樣式，而又不想去除scoped屬性形成組件之間的樣式覆蓋。這時咱們能夠經過特殊的方式穿透scoped

• 一、stylus的樣式穿透 使用 >>>

.wrapper >>> .swiper-pagination-bullet-active
    background: #fff複製代碼

• 二、sass和less的樣式穿透 使用 /deep/

// 語法
外層 /deep/ 第三方組件 {
    樣式
}

// eg
.wrapper /deep/ .swiper-pagination-bullet-active{
    background: #fff;
}複製代碼

以爲有幫助的小夥伴點個贊支持下~

以爲有幫助的小夥伴點個贊支持一下~