Vue组件开发中 style 添加scoped后，修改第三方组件样式没有效果问题以及打包之后样式没改变的问题

在vue的开发中，我们通常和element-UI配合开发，就会遇到，在组件style中添加scoped后，element-ui中使用的子组件样式无法改变。

1、不用scoped，去掉这个属性，但是会污染全局样式，（可配合less 或者 sass,，所有样式写在当前组件id或class下面）

 

    官网文档：Scoped CSS · vue-loader

3、深度选择器

如果您希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合器：

以上将编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

某些预处理器（如Sass）可能无法>>>正确解析。在这些情况下，您可以使用/deep/组合器 - 它是别名，>>>并且完全相同。

官网文档：Scoped CSS · vue-loader

4、vue 打包 后样式顺序错乱，导致样式失效

本地测试的时候 样式没有任何问题，但是打包之后 样式顺序就不对了

解决：把修改的第三方组件的样式全部放在自定义全局样式common.less中，

common.less一定要在element-ui之前引入