vue對插件（iview,elementui,treeselect）樣式的局部修改

一. 學習描述

  在vue的使用過程中，我們知道插件的使用可以大大的提高我們的開發效率，這寫插件都是經過很多人的驗證和修改的，要比我們自己寫方便的很多。

  但是在開發的過程中，有些插件一些在特定的頁面我們可能不要原來的樣式，需要進行修改。然而我們在使用vue的過程中都會使用scope防止當前頁面的樣式污染到其它的頁面，可是這樣也就導致了我們修改了插件的樣式無法起到作用。只有全局修改才能起到作用。

  那麼有沒有別的方式，既能修改插件的樣式而且有不會污染到全局的樣式呢？ 答案是：有的

二. 具體方法

1> /deep/ 深層穿透

  scoped能有效的方式樣式的全局污染，但是同時也是阻止了我們對第三方插件樣式的修改，使用/deep/樣式穿透既可以達到修改第三方插件樣式的效果，而且不會對全局造成污染。

  /deep/ .ivu-tooltip-light .ivu-tooltip-inner {
    background-color: #ecc9e2;
    color: #f30000;
  }

2> >>>

  其實這個就是/deep/的另外一種寫法，只不過，可能有些sass,less之類的預處理無法正確的解析，所以最好是使用/deep/.

  >>> .ivu-tooltip-light .ivu-tooltip-inner {
    background-color: #ecc9e2;
    color: #f30000;
  }

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