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

所以，我读过here https://vue-loader.vuejs.org/en/features/scoped-css.html在 Vue.js 中，你可以使用/deep/ or >>>在选择器中，以便创建适用于子组件内部元素的样式规则。然而，尝试在我的样式中使用它，无论是在 SCSS 还是普通的旧 CSS 中，都是行不通的。相反，它们会逐字发送到浏览器，因此没有任何效果。例如：

主页.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>

我的 webpack 配置涉及vue-loader看起来像这样：

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

所以我的问题是，我如何得到这个>>>操作员工作？

我已经找到了this https://stackoverflow.com/a/46964259/3508956答案，但我正在这样做，但它不起作用......

Vue 2.0 - 2.6

^{The following also works in Vue 3 but is deprecated.}

Sass:   Use ::v-deep

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

Not使用萨斯：   Use >>>

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

无论使用哪种语法，<style>该组件的标签必须是scoped:

<style scoped>

Vue 3（和 Vue 2.7）

在 Vue 3 中，::v-前缀现在是已弃用 https://v3.vuejs.org/api/sfc-style.html#deep-selectors我们不再需要>>>。我们可以使用统一的:deep选择器是否使用 Sass，但现在建议在选择器中使用括号。

Use :deep(.child-class)

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

^{This also works in Vue 2.7 (final Vue 2 release)}

Vue 3 新选择器

另外，在 Vue 3 中，有一个新功能 https://v3.vuejs.org/api/sfc-style.html#slotted-selectors对于具有<slot>可以对传递的槽内容进行样式设置。

槽位内容   Use :slotted(.child-class)

:slotted(.slot-class) {
    background-color: #000;
}

最后，在 Vue 3 中，有一个新功能 https://v3.vuejs.org/api/sfc-style.html#global-selectors甚至可以从scoped成分：

全局样式   Use :global(.my-class)

:global(.my-class) {
    background-color: #000;
}

对于任何语法，<style>该组件的标签必须是scoped:

<style scoped>

Summary

在 Vue 2 中：

• The /deep/语法已弃用
• Use ::v-deep与 Sass 一起使用>>>没有萨斯

在 Vue 3 中：

• ::v-deep .child-class已被弃用，有利于:deep(.child-class)
• The ::v-前缀已被弃用，有利于:
• The >>>语法已弃用
• The /deep/语法已弃用
• 有新的:slotted and :global选择器

对于每个版本/语法，<style>该组件的标签必须是scoped:

<style scoped>