vue 樣式加scoped不起作用

出現環境：在vue組件中使用了scoped，發現手寫的標簽樣式起作用，但是第三方的組件標簽並沒有起作用

　原因：

　　1. 先搞清楚scoped的布局實現

　　　　在style上加上scoped后 會對 style里面加了樣式的標簽 每個加上一個 像這樣的一個屬性

　　　　data-v-4686dc05　　

　　　　組件內的樣式只會對帶有這個標簽的dom元素生效，因此加上scoped后，組件內的樣式不會影響組件外。

            官方文檔

　　2. scoped 只會作用於自組件的根組件

　　　　官方解釋：使用 scoped 后，父組件的樣式將不會滲透到子組件中。不過一個子組件的根節點會同時受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響

 

 

解決方案：

　　1. 加上一個不帶scoped的style

　　　　<style scoped>

　　　　　　// scoped style
　　　　<style>
　　　　<style>

　　　　　　//no scoped style
　　　　</style>

　　2. 使用 >>> 深度訪問 注意：只針對css起作用   一些sass less預處理器不起作用

　　　　

　　<style lang="css" scoped>
　　　　.a >>> .b { 
　　　　   /* ... */ 
　　　　}
　　</style>

　　3. 使用 /deep/  或者  ::v-deep 推薦使用 ::v-deep可以直接使用

　　// 我在使用/deep/時會報錯  查了一下  需要修改webpack ，vue-loader

　　

　　<style lang="scss" scoped>
　　　　.a{
　　　　   ::v-deep .b { 
　　　　      /* ... */ 
　　　　   }
　　    } 
    </style>