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

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

<style lang="less" >

#header {

//header组件下面的所有样式，可包裹在下面，防止污染全局样式

}

<style>

2、混合本地和全局样式

您可以在同一组件中包含范围和非范围样式：

<style>
/* global styles */
</style>

 

<style scoped>
/* local styles */
</style>

    官网文档：Scoped CSS · vue-loader

3、深度选择器

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

<style scoped>
.a >>> .b { /* ... */ }
</style>

以上将编译成：

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

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

官网文档：Scoped CSS · vue-loader

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

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

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

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