Vue开发中覆盖element-ui原有的样式

Vue开发中覆盖element-ui原有组件样式

　　项目在开发Vue的时候用的UI库是element-ui，在某个需求我需要自己尝试去修改element-ui中内置组件的样式。

　　为了尝试覆盖，我做了以下的操作：

　　　　1、使用自定义的类名，最终在实现效果的时候还是不可以，打开F12检查模式，发现还是类名没有附加上去，但是没实现，不甘心失败的我继续看看能不能怎么解决

　　　　2、使用组件自身携带的类名，例如el-button这样直接覆盖，发现还是不行，推测是因为内置属性使用了父元素等，也就是他的权重计算比我写的高

　　　　3、使用深度作用选择器 >>> 或者 /deep/

　　　　注：>>>和 /deep/两个是一样的功能

　　　　使用方法：在自定义类名中使用，如图示  

 

 

   　　但是我在使用>>>这个的时候是没办法生效的，初步推测是因为CSS预处理器的原因，因为之前使用的LESS预处理器是没有这问题，我这里是使用的是SCSS预处理器。

　　　为了防止不生效，我在每一个样式后面都加了!important，这样下来，我需要的样式就正常显示了，下面是没修改前和修改后的样式对比：

 

 　题外话：scoped是什么标签属性？为什么Vue-CLI在创建Vue文件的时候会在每一个style样式里面写上scoped属性。