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

这对你有用吗？