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。

如果您希望范围样式中的选择器为“深度”，即影响子组件，则可以使用＆gt;＆gt;＆gt;组合子：

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

以上将编译成：

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

某些预处理器（例如SASS）可能无法解析＆gt;＆gt;＆gt;正常。在这些情况下，您可以使用/ deep / combinator代替 - 它是＆gt;＆gt;＆gt;的别名并且工作原理完全相同。

所以你最终得到了：

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

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

Answer 2

您可以将样式放在单独的文件中，并从需要它的所有组件中引用它：

＆＃13;

<style src="path/to/your/styles" lang="scss" scoped></style>

＆＃13;

Answer 3

router-view标记不会将样式传递给其子元素的原因是因为router-view本身不是可样式化的html标记，因此您不能对其应用任何样式。您可以尝试，但不会渲染。

原因：router-view本质上是模板标记，或Vue的占位符，可锚定并插入为此调用的component或View路线。结果，router-view标签不会出现在编译后的标记中，您只会看到正在加载的View或Component。

与Vue App进入index.html文件的App Entry点的工作方式相同。至少那是我的经验和知识。

此外，@ Antonio Trapani的回答很好，我想补充一下，您甚至可以制作一个具有所有全局样式或跨多个组件所需样式的scss文件，然后@导入样式到{{1 }}，这将使您可以访问整个应用程序。还有，IME。

希望这对您有所帮助。干杯。

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

3 个答案: