Vue样式范围

Question

<template>
<div>
    <test />
    <test1 />
    <test2 />
</div>
</template>

<style scoped>
@import '@/main.css'


</style>

我知道作用域不会让父级样式泄漏给子级组件。

但是，如果我希望import style泄漏到所有子组件，而不要泄漏到全局。

此样式用于所有子组件，但不用于全局样式。

我发现的方式是在每个子组件中使用导入样式，但是如果子组件过多，则在每个子组件中也需要导入样式。

有什么办法吗？

Answer 1

这是我的codesanbox example。

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

父组件：

<template>
  <div class="parent">
    <test1/>
    <test2/>
  </div>
</template>
<style scoped>
.parent >>> .child {
 // ...
}
</style>

子组件：

<template>
<div class="child"></div>
</template>

以上内容将编译为：

<div class="parent" data-v-f3f3eg9>
 <div class="child"></div>
 <div class="child"></div>
</div>

.parent[data-v-f3f3eg9] .child {}

有关deep的更多使用技巧，请参见here