css - 如何在 Vue.js 中使用/deep/或 >>> 或::v-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

Vue 2

^{以下内容也适用于 Vue 3，但已弃用。}

Sass:   使用 ::v-deep

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

不使用 Sass:   使用 >>>

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

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

<style scoped>

---

Vue 3(和 Vue 2.7)

在 Vue 3 中，::v-前缀现在是 deprecated我们不再需要>>> .我们可以使用统一的:deep选择器不管是否使用Sass，但现在建议在选择器上使用括号。

使用:deep(.child-class)

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

^{这也适用于 Vue 2.7(Vue 2 最终版本)}

---

Vue 3 新选择器

另外，在 Vue 3 中，有一个 new feature对于带有 <slot> 的组件启用样式传递的插槽内容。

广告位内容   使用 :slotted(.child-class)

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

最后，在 Vue 3 中，有一个 new feature甚至从 scoped 注册全局样式组件:

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

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

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

<style scoped>

---

总结

在 Vue 2 中:

• /deep/不推荐使用语法
• 使用 ::v-deep对于 Sass，使用 >>>没有 Sass

在 Vue 3 中:

• ::v-deep .child-class已弃用，取而代之的是 :deep(.child-class)
• ::v-前缀已弃用，取而代之的是 :
• >>>不推荐使用语法
• /deep/不推荐使用语法
• 有新的:slotted和 :global选择器

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

<style scoped>