今天在覆蓋iview組件樣式的時(shí)候發(fā)現(xiàn)一個(gè)問題，就是無法覆蓋組件原有的樣式，最后在github的issue中找到了答案：

不要使用scoped屬性。于是我查找了下關(guān)于scoped的文章。

我們假設(shè)把這種組件叫做模塊私有組件，其他的未加scoped的叫做模塊一般組件。通過查看DOM結(jié)構(gòu)發(fā)現(xiàn)：vue通過在DOM結(jié)構(gòu)以及css樣式上加唯一不重復(fù)的標(biāo)記，以保證唯一，達(dá)到樣式私有化模塊化的目的。

代碼如下：

//valChange.less(使用了嵌套規(guī)則)#valueSlide{ .bigSlider .ivu-slider-wrap{ height: 6px; } .bigSlider .ivu-slider-bar { height: 6px; } .bigSlider .ivu-slider-button{ width: 14px; height: 14px; } }

//html部分

<style lang='less' scoped> @import './valChange.less';</style><div class='valid-panel'> <div class='containerBox'> <div v-bind:style='validStyle'> <Slider ></Slider> </div> </div></div>

也就是我們在style中使用scoped屬性會(huì)出現(xiàn)下面的情況：

HTML部分：

CSS部分：

從上面的字可以看出，添加了scoped屬性的組件，為了達(dá)到組件樣式模塊化，做了兩個(gè)處理：

給HTML的DOM節(jié)點(diǎn)加一個(gè)不重復(fù)data屬性(形如：data-v-19fca230)來表示他的唯一性

在每句css選擇器的末尾（編譯后的生成的css語句）加一個(gè)當(dāng)前組件的data屬性選擇器（如[data-v-2311c06a]）來私有化樣式

那么問題來了：

對(duì)于當(dāng)前組件下調(diào)用的其他組件，data屬性只會(huì)添加到第一層HTML中：

對(duì)于我們想覆蓋的樣式則無法起到作用：（在瀏覽器調(diào)試中手動(dòng)添加 [data-v-19fca230] 屬性后可以匹配）

解決方案：

不使用scoped屬性

總結(jié)一下scoped三條渲染規(guī)則：

給HTML的DOM節(jié)點(diǎn)加一個(gè)不重復(fù)data屬性(形如：data-v-19fca230)來表示他的唯一性

在每句css選擇器的末尾（編譯后的生成的css語句）加一個(gè)當(dāng)前組件的data屬性選擇器（如[data-v-19fca230]）來私有化樣式

如果組件內(nèi)部包含有其他組件，只會(huì)給其他組件的最外層標(biāo)簽加上當(dāng)前組件的data屬性

問題補(bǔ)充：

1、如果不使用scoped如何解決樣式全局污染？

推薦使用scoped推動(dòng)組件私有化，文章所提到的不使用僅出現(xiàn)在已有UI庫的樣式覆蓋上（當(dāng)然人家用了scoped 那就很難辦了）。

首先，解決組件樣式全局污染，也就是我們在這里不使用scoped 覆蓋了樣式，那么我們在其他地方調(diào)用該組件就會(huì)被覆蓋。那么我們在使用組件的時(shí)候?qū)M件給一個(gè)類名 或者其他甄別屬性（id），覆蓋樣式就針對(duì)該類名進(jìn)行重寫樣式。

其次，解決其他樣式全局污染，如果我們通過：

<style lang='less'> @import './test.less';</style>

引進(jìn)樣式，那么不使用scoped ，'./test.less' 中的其他類名樣式可能會(huì)污染全局，我這里用一個(gè)比較笨的方法處理：在模板中使用兩次<style></style> 標(biāo)簽：

<style lang='less' scoped> @import './test.less';</style><style lang='less'> //你的覆蓋樣式</style>

這樣既覆蓋了樣式，其他樣式不會(huì)被覆蓋到全局，效果代碼我就補(bǔ)貼上來，感興趣的同學(xué)可以自己試一試。（注意兩個(gè)標(biāo)簽的順序）。

官網(wǎng) vue-loader 中提到每個(gè)vue模板中可以有多個(gè)<style></style>標(biāo)簽，所以上面的寫法是沒有問題的。

補(bǔ)充知識(shí)：Vue中的scoped及穿透方法 - - > scoped穿透

什么是scoped？

在vue文件中的style標(biāo)簽上，有一個(gè)特殊的屬性：scoped。當(dāng)一個(gè)style標(biāo)簽擁有scoped屬性時(shí)，它的CSS樣式就只能作用于當(dāng)前的組件，也就是說，該樣式只能適用于當(dāng)前組件元素。通過該屬性，可以使得組件之間的樣式不互相污染。如果一個(gè)項(xiàng)目中的所有style標(biāo)簽全部加上了scoped，相當(dāng)于實(shí)現(xiàn)了樣式的模塊化。

scoped的實(shí)現(xiàn)原理

vue中的scoped屬性的效果主要通過PostCSS轉(zhuǎn)譯實(shí)現(xiàn)，

如下是轉(zhuǎn)譯前的vue代碼：

<style scoped>.example { color: red;}</style><template> <div class='example'>hi</div></template>

轉(zhuǎn)譯后：

<style>.example[data-v-5558831a] { color: red;}</style><template> <div data-v-5558831a>hi</div></template>

即：PostCSS給一個(gè)組件中的所有dom添加了一個(gè)獨(dú)一無二的動(dòng)態(tài)屬性，然后，給CSS選擇器額外添加一個(gè)對(duì)應(yīng)的屬性選擇器來選擇該組件中dom，這種做法使得樣式只作用于含有該屬性的dom——組件內(nèi)部DOM。

為什么需要穿透scoped？

scoped看起來很美，但是，在很多項(xiàng)目中，會(huì)出現(xiàn)這么一種情況，即：引用了第三方組件，需要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。此時(shí)只能通過特殊的方式，穿透scoped。

<style scoped> 外層 >>> 第三方組件 { 樣式 }</style>

實(shí)際代碼比如（我這里使用的是 elementui第三方組件庫的組件名）：

<style scoped>/* .footerContainer是父級(jí)容器 .el-table--border td 是elementui自己封裝的名字 */.footerContainer >>> .el-table--border td { border-right: none;}.footerContainer .screen_configuration_el-table th { background-color: #eff2f7 !important; border-left: none !important; color: black !important;}.footerContainer >>> .el-table--border { border: 1px solid #ebeef5; border-left: none; border-right: none;}</style>

通過 >>> 可以使得在使用scoped屬性的情況下，穿透scoped，修改其他組件的值。

還有一種方法就是引入外部 --> 全局 style css --> 曲線救國的方法

其實(shí)，還擁有一種曲線救國的方法，即在定義一個(gè)含有scoped屬性的style標(biāo)簽之外，再定義一個(gè)不含有scoped屬性的style標(biāo)簽，即在一個(gè)vue組件中定義一個(gè)全局的style標(biāo)簽，一個(gè)含有作用域的style標(biāo)簽：

<style>/* global styles */</style><style scoped>/* local styles */</style>

此時(shí)，你只需要將修改第三方樣式的css寫在第一個(gè)style中即可。

注意的地方：

如果使用 >>> scoped穿透選擇器 就不能再style上面添加less sass scss 否則報(bào)錯(cuò)。

如下圖：

以上這篇基于vue中的scoped坑點(diǎn)解說就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。