如何在Vue.js中使用/ deep /或>>>？

Question

所以，我读过here，在Vue.js中，你可以在选择器中使用/deep/或>>>来创建适用于子组件内部元素的样式规则。但是，尝试在我的样式中使用它，无论是在SCSS中还是在普通的旧CSS中，都不起作用。相反，它们会逐字发送到浏览器，因此无效。例如：

home.vue：

<style lang="css" scoped>
    .autocomplete >>> .autocomplete-input
    {
    // ...
    }
</style>

生成的css：

<style type="text/css">
.autocomplete >>> .autocomplete-input[data-v-2bda0c9a]
{
//...
}
</style>

我想要的是：

<style type="text/css">
.autocomplete[data-v-2bda0c9a] .autocomplete-input
{
//...
}
</style>

我与vue-loader有关的webpack配置如下所示：

// ...
{
    test: /\.vue$/,
    loader: "vue-loader",
    options: {
        loaders: {
            scss: "vue-style-loader!css-loader!sass-loader"
        }
    }
}
// ...

所以我的问题是，我如何让这个>>>运算符工作？

我已经找到了this的答案，但我正是这样做而且它不起作用......

Answer 1

我已成功使用/ deep /在Vue的SCSS样式表中使用此结构：

.parent-class {
  & /deep/ .child-class {
    background-color: #000;
  }
}

Answer 2

接受的答案在范围SCSS中不适用于我，但有时这样做：

.parent-class {
  &::v-deep .child-class {
    background-color: #000;
  }
}

这通常做（省略父类）：

::v-deep .child-class {
  background-color: #000;
}

Answer 3

现在/deep/将很快被弃用

Vue Github参考 - https://github.com/vuejs/vue-loader/issues/913

任何范围的component's css都可以使用deep selector进行更改

在这种情况下使用::v-deep，因为/deep/将被弃用。

参考 - Deep Selector

只需使用chrome或任何浏览器控制台中的element检查要修改的渲染devtools的类。

然后，在你消费component，修改它

<style scoped>
::v-deep .custom-component-class {
   background: red; //
}
</style>