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

Posted 2023-02-22

【中文标题】vuejs 应用程序中多种布局的不同样式

【英文标题】：Different styles for multiple layouts in vuejs applications

【发布时间】：2020-04-04 08:09:47

【问题描述】：

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

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

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

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

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

【参考方案1】：

您可以使用“深度选择器”来定位您的作用域父样式中的子组件。

例如，

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

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

这对你有用吗？

【讨论】：

谢谢，但不完全是 - 我使用的是 sass，而且我已经有太多样式无法更改所有样式。