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导致页面打包文件体积增大。