vue-loader scoped作用域覆盖

本文主要介绍Vue中如何使用深度作用域解决全局样式覆盖。

scoped

当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。
使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。

代码如下:

1
2
3
4
5
6
7
8
9
10

<style scoped>
.example {
color: red;
}
</style>

<template>
<div class="example">hi</div>
</template>

如果需要覆盖全局样式或者影响子组件,可以使用 >>> 操作符

代码如下:

1
2
3
4

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

有些像 Less、Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名,同样可以正常工作。

扫一扫,请老师喝水