如何将Vue.js作用域样式应用于通过view-router加载的组件？

Question

如何将Vue.js作用域样式应用于通过加载的组件<view-router>.

这是我的代码:

<template>
  <div id="admin">
    <router-view></router-view>
  </div>
</template>

<style lang="scss" scoped>
#admin {
  .actions {
    display: none;
    span {
      cursor: pointer;
    }
  }
}
</style>

当我访问/posts一个名为的组件Posts将被加载时,在这个组件里面我有一个

<div class="actions">
  some content
</div>

问题是定义的样式#admin不适用于.action元素.没有作用域时,这很好用.#admin组件样式的问题出现了scoped.

在将.actions样式保留在admin组件范围样式标记内时,有没有办法做到这一点？

Answer 1

这可能是你想要的https://vue-loader.vuejs.org/en/features/scoped-css.html#deep-selectors

由于您的代码段专门使用SCSS,因此您必须使用/ deep/combinator.

如果您希望范围样式中的选择器"深入",即影响子组件,则可以使用>>>组合器:

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

以上将编译成:

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

某些预处理器(如SASS)可能无法正确解析>>>.在这些情况下,您可以使用/ deep/combinator代替 - 它是>>>的别名,并且工作方式完全相同.

所以你最终得到:

<style lang="scss" scoped>
  #admin {
    some-property: some-style;

    /deep/ .actions {
      some-property: some-style;
    }
  }
</style>