如何在 vue 的 scss 中使用深度选择器答案

【问题标题】：How to use deep selector in scss in vue如何在 vue 的 scss 中使用深度选择器
【发布时间】：2019-06-05 01:43:57
【问题描述】：

如何在 vue 的 scss 中使用深度选择器？

下面的代码不起作用。

<style lang="scss" scoped>
.a{
 &>>>.b{
  ...
 }
}
</style>

css 中的 >>> 之类的深度选择器，但在 vue 单个文件组件中的 scss 中。

【问题讨论】：

标签： vue.js

【解决方案1】：

我遇到了同样的问题，我最终使用::v-deep 解决了这个问题，如下所述：

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

<style lang="scss" scoped>
.v-input {
  ::v-deep .v-text-field__details {
    min-height: 0;
    margin: 0;
    .v-messages {
      min-height: 0;
    }
  }
}
</style>

【讨论】：

【解决方案2】：

来自 vue 文档：

“某些预处理器，例如 Sass，可能无法正确解析 >>>。在这些情况下，您可以改用 /deep/ 组合器 - 它是 >>> 的别名，并且工作方式完全相同。 "

所以试试这个：

<style lang="scss" scoped>
.a {
 /deep/ .b {
  ...
 }
}
</style>

【讨论】：

这将改变/已经改变，取决于您对 SCSS 的实现。如果您使用的是dart-sass，那么这将不起作用。您需要使用::v-deep 而不是GH comment。如果您使用的是node-sass，那么您可以继续使用/deep/，直到他们赶上并删除对它的支持。
是的，这只会导致一个 SassError，它期望在 /deep/ 的开头选择一个 / 而不是 /