css穿透（帶案例詳解）

問題背景

在使用vue構建專案的時候，引用了第三方元件庫，只需要在當前頁面修改第三方元件庫的樣式，以做到不汙染全域性樣式。通過在樣式標籤上使用scoped，達到樣式只作用到本頁面的目的，但是此時再修改元件樣式就不起作用了。

vue中的scoped屬性的效果主要通過postcss轉譯實現

【參與規則】：在#技術乾貨#話題下發數說，分享您的運維工作經驗/有趣故事。【活動獎勵】：我們將根據內容質量和互動熱度選3位網友送《程式設計師面試筆試寶典》或以下任選圖書1本，同時也會抽 5 位幸運鵝，送50墨值獎勵～【活動時間】：8月12日——8月19日10:00

簡單原理

通過 >>> 穿透scoped，iview中需要在元件上使用i-class宣告第三方元件類名

穿透方法實際上違反了scoped屬性的意義。而且在vue中過多使用scoped，導致頁面打包檔案體積增大。

通常能寫在index中的樣式盡量寫在index中，我們可以通過在index樣式中通過外層元件新增唯一class來區分元件+第三方樣式來實現類似於scoped的效果，又方便修改各種第三方元件的樣式。

應用


.text-box
}