Vue中scoped穿透的幾種方法 總結

2021-10-03 16:32:27 字數 616 閱讀 3797

在vue檔案中的style標籤上有乙個特殊的屬性,scoped。當乙個style標籤擁有scoped屬性時候,它的css樣式只能用於當前的vue元件,可以使元件的樣式不相互汙染。如果乙個專案的所有style標籤都加上了scoped屬性,相當於實現了樣式的模組化

(1)stylus的樣式穿透 使用》

外層》 第三方元件

例如:.container >>> .swiper-pagination-bullet-active

(2)sass和less的樣式穿透 使用/deep/

外層 /deep/ 第三方元件

例如:.container /deep/ .swiper-pagination-bullet-active

不使用scoped方法(這種辦法可能會導致樣式重複。不推薦使用)

在vue組建中使用兩個style標籤,乙個加上scoped屬性,乙個不加scoped屬性,把需要覆蓋的css樣式寫在不加scoped屬性的style標籤裡

建立乙個reset.css(基礎全域性樣式)檔案,裡面寫覆蓋的css樣式,在入口檔案main.js 中引入

Vue中的scoped和scoped穿透

文章摘自 一 什麼是scoped 在vue檔案中的style標籤上有乙個特殊的屬性 scoped。當乙個style標籤擁有scoped屬性時候,它的css樣式只能用於當前的vue元件,可以使元件的樣式不相互汙染。如果乙個專案的所有style標籤都加上了scoped屬性,相當於實現了樣式的模組化。二 ...

Vue中的scoped及穿透方法

在vue檔案中的style標籤上,有乙個特殊的屬性 scoped。當乙個style標籤擁有scoped屬性時,它的css樣式就只能作用於當前的元件,也就是說,該樣式只能適用於當前元件元素。通過該屬性,可以使得元件之間的樣式不互相汙染。如果乙個專案中的所有style標籤全部加上了scoped,相當於實...

Vue中的scoped及穿透方法

在vue檔案中的style標籤上,有乙個特殊的屬性 scoped。當乙個style標籤擁有scoped屬性時,它的css樣式就只能作用於當前的元件,也就是說,該樣式只能適用於當前元件元素。通過該屬性,可以使得元件之間的樣式不互相汙染。如果乙個專案中的所有style標籤全部加上了scoped,相當於實...