如何将 Vue.js 作用域样式应用于通过视图路由器加载的组件？

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

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

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

Answer 2

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

由于您的代码片段专门使用 SCSS，因此您必须使用 /deep/ 组合器。

如果你希望作用域样式中的选择器是 "deep"，即影响子组件，你可以使用 >>> 组合器：

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

以上会编译成：

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

Some pre-processors, such as SASS, may not be able to parse >>> properly. In those cases you can use the /deep/ combinator instead - it's an alias for >>> and works exactly the same.

所以你最终会得到：

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

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

Answer 3

router-view 标签不会将样式传递给其子标签的原因是因为 router-view 本身不是可设置样式的 html 标签，因此您不能对其应用任何样式.您可以尝试，但它不会呈现。

原因： router-view 本质上是一个模板标签，或占位符，供 Vue 锚定并插入 component 或 View那条路线被要求。因此，router-view 标记不会出现在已编译的标记中，您只会看到正在加载的 View 或 Component。

它的工作方式与 Vue 应用程序进入 index.html 文件的应用程序入口点工作方式相同。至少这是我的经验和知识。

此外，@Antonio Trapani 是个好答案，我想补充一点，您甚至可以拥有一个包含所有全局样式或多个组件所需样式的 scss 文件，然后只需将样式 @import 到 App.vue 这将使您可以访问整个应用程序。还有，输入法。

希望这对一些人有所帮助。干杯。

如何将 Vue.js 作用域样式应用于通过视图路由器加载的组件？

How to apply Vue.js scoped styles to components loaded via view-router?

javascript

css

vue.js

vue-router

vuejs2