deep 深度选择器与修改 element-ui 样式

Scoped Css

当

转换结果：

由转换结果可见，每一个类名都加上了 hash 值，使样式只作用于当前组件。

修改 element-ui 默认样式

混用本地和全局样式

抽取到全局 css 文件

在全局 css 文件中重写覆盖的样式，为了不污染全局样式，可以加个单独的类名

深度作用选择器

这是 vue-loader 提供的一种写法，如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

上述代码将会编译成：

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

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

参考资料

https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B7%E7%94%A8%E6%9C%AC%E5%9C%B0%E5%92%8C%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F