vue2、vue3中scss样式穿透

在Vue2中，可以使用 `>>>` 或 `/deep/` 这两个选择器来进行 SCSS 样式穿透。例如：

// Vue2中的样式穿透
<style lang="scss">
  .parent >>> .child {
    background-color: red;
  }
</style>

而在Vue3中，由于采用了新的编译器，所以使用 `>>>` 或 `/deep/` 这种方式会报错，需要使用 `::v-deep` 选择器来进行 SCSS 样式穿透。例如：

// Vue3中的样式穿透
<style lang="scss">
  .parent ::v-deep .child {
    background-color: red;
  }
</style>

需要注意的是，样式穿透虽然能够解决一些问题，但是在实际开发中应该尽量避免使用，因为它会影响样式的可读性和维护性。

相关问题

vue2scss样式穿透

在 Vue 2 中，可以使用 `::v-deep` 或 `/deep/` 来进行样式穿透（也被称为深度选择器）。样式穿透允许你在子组件中修改父组件的样式。

例如，假设你有一个父组件的样式是这样的：

.parent {
  .child {
    color: red;
  }
}

在子组件中，你可以使用 `::v-deep` 或 `/deep/` 来修改父组件的样式：

<style scoped>
.child ::v-deep .parent {
  .child {
    color: blue;
  }
}
</style>

注意，使用 `::v-deep` 或 `/deep/` 会禁用样式作用域，因此你需要将 `<style>` 标签的 `scoped` 属性移除。另外，如果你正在使用 SCSS 预处理器，则需要确保已经正确配置了相关的插件。

vue scss中使用/deep/报错

在 Vue 中使用 `/deep/` 或 `::v-deep` 可以解除样式作用域限制，允许您在子组件中修改父组件的样式。但是需要注意的是，`/deep/` 在 Vue 2.x 中已被废弃，取而代之的是 `>>>` 或 `::v-deep`。

如果您在使用 `/deep/` 或 `::v-deep` 时报错，可能是因为您的 CSS 预处理器（如 SCSS）不支持这些选择器。这是因为 `/deep/` 或 `::v-deep` 是 Vue 特定的选择器，不是标准的 CSS 选择器。

解决方法是使用其他方法来实现样式穿透，或者尝试更新您的 CSS 预处理器版本以获得对 `/deep/` 或 `::v-deep` 的支持。例如，您可以使用以下方法来实现样式穿透：

1. 使用 `>>>` 或 `::v-deep` 代替 `/deep/`。在 Vue 2.x 中，可以将 `/deep/` 替换为 `>>>` 或 `::v-deep` 来实现相同的效果。

例如，如果您想穿透到子组件中修改标题的样式，可以这样写：

   <style lang="scss" scoped>
   .parent {
     /deep/ .child {
       /* 修改子组件的样式 */
     }
   }
   </style>

可以替换为：

   <style lang="scss" scoped>
   .parent {
     >>> .child {
       /* 修改子组件的样式 */
     }
   }
   </style>

2. 使用 `::v-deep` 代替 `/deep/`。在 Vue 2.x 中，您还可以使用 `::v-deep` 来实现样式穿透。

例如，如果您想穿透到子组件中修改标题的样式，可以这样写：

   <style lang="scss" scoped>
   .parent {
     /deep/ .child {
       /* 修改子组件的样式 */
     }
   }
   </style>

可以替换为：

   <style lang="scss" scoped>
   .parent ::v-deep .child {
     /* 修改子组件的样式 */
   }
   </style>

请注意，以上方法需要您的 CSS 预处理器支持 `>>>` 或 `::v-deep` 选择器。如果您仍然遇到问题，请检查您的 CSS 预处理器文档或更新预处理器版本以获得支持。