普通的html、css結構，樣式權重為 !important > 行內 > 頭部 > 引入。但是在vue裡面，我們的檔案結構發生改變，不再是html檔案而是vue檔案，將解析為元件也不是頭部樣式，這時樣式權重比較複雜，下面我們來詳細說一下。
vue樣式作用域分為兩種：一般情況下是 子元件 > 父元件 > 全域性，但是有時候我們會有些特別的需求。私有：僅作用於當前檔案dom元素的樣式；私有又分為兩種情況，父元件和子元件
例如現在有乙個公共按鈕元件，我們在幾個頁面中呼叫它。
但是在首頁呼叫的時候，要求改變按鈕顏色。我第乙個想法就是在父元件裡重寫樣式，覆蓋顏色，但是由於權重關係，並沒有起效。要想效果生效，需要給樣式新增>>>深度作用選擇器。
深度作用選擇器是vue-loader的乙個屬性，作用於通過 v-html 建立的 dom 不受 scoped 樣式影響，但是我們可以通過深度作用選擇器來為他們設定樣式。
"dom"
>
export default }}
/* 無效
你需要重寫哪個元素的樣式，作用器就放在那個元素的前面！
有兩個解決方案：
import
'swiper/css/swiper.min.css'
import
'bootstrap/dist/js/bootstrap.min'
import
'bootstrap/dist/css/bootstrap.min.css'
import
'animate.css'
;import
"vue-image-lightbox/dist/vue-image-lightbox.min.js"
import
"vue-image-lightbox/dist/vue-image-lightbox.min.css"
import vuelazyload from
"vue-lazyload"
;//懶載入
需要注意的是：
參考：深度作用選擇器
vue樣式穿透
在一次這樣的需求中，需要實現滑倒底部時自動請求資料，需要動態建立節點然後追加到某元素中，這期間遇到的問題就是在動態建立節點後，類名也已經加上了 但是樣式就是沒有生效，最後發現原因的產生竟然是中scoped屬性 該屬性的作用是用來繫結當前樣式不被汙染，同時也就意味著在建立新的node後，該node樣式...
scope樣式穿透
首發於我的部落格 有這樣一種情境 1 因為某些特殊的原因我不希望註冊乙個全域性元件，而且不想新增乙個檔案作為元件，只能在當前頁面中註冊區域性元件 2 在區域性元件中，該元件又是乙個富樣式的元件 3 所以我希望在當前頁面中，穿透部分scope，使當前頁面的一些樣式可以應用於區域性元件中 1.單純css...
降低scss樣式的權重
scss的巢狀寫法是方便了許多，但是帶來的問題是權重的增加，如果你想通過dom修改某個樣式將會發現，要修改的樣式總是被原有的覆蓋，不用想，肯定是權重值不夠，但是又不想用 important，那麼解決的方式就是使用scss的 at root指令，這個指令可以然你的樣式在文件的根層級上輸出而不是巢狀在符...