vuejs应用程序中多种布局的不同样式

Question

我的项目中有两个完全不同的布局 - 它们都是两个独立的父路由，内部有许多嵌套组件。我想为它们使用单​​独的全局样式。问题是当我在其中一个导入样式时，另一个也会受到影响：

<style type="scss">
  @import "sass/first.scss";
</style>

因为导入是全局的，它会影响其他布局中的类。解决方案是范围样式：

<style type="scss" scoped>
  @import "sass/first.scss";
</style>

但它不会影响所有的子元素，只会影响它们的父元素，因此它也不会按预期工作。有没有办法在应用程序中使用像这样的单独的全局样式vue.js？

Answer 1

您可以使用“深度选择器”来定位父样式范围内的子组件。

例如，

.parent-container >>> .child-element {
    background: red;
}

这里有一些文档： https: //vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles

这对你有用吗？