如何在 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"
        }
    }
}
// ...

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

我已经找到答案，但我正在这样做，但它不起作用...

Answer 1

我已经在具有这种结构的 Vue 范围 SCSS 样式表中成功使用 /deep/：

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

编辑：/deep/ 已被弃用，如果它不再适合您，请参阅解释 ::v-deep 的其他答案

Answer 2

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 （2022 年 1 月 19 日更新）

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

使用:deep(.child-class)

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

^{如果您愿意，您仍然可以使用任何已弃用的语法。}

Vue 3 新选择器

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

插槽内容 使用: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 选择器

对于每个 version/syntax，此组件的 <style> 标记必须是 scoped:

<style scoped>

Answer 3

避免使用 /deep/ 而是使用 ::v-deep

任何范围 component's css 都可以使用 deep selector 进行更改但很快 /deep/ 就会被弃用

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

在这种情况下使用 ::v-deep，并避免弃用/deep/

参考 - Deep Selector

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

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

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

Answer 4

对我来说，唯一有用的是

<style scoped>.  // sass and scss didn't work
  >>> .deep-selector {
    ...
  }
</style>

Answer 5

虽然在Documentation中没有找到，答案是您要访问的组件不能是根组件。将您的单个组件包装在 <div> 中，它应该像其他人解释的那样在范围 scss 上使用 ::v-deep 工作。

Answer 6

我通过添加

解决了这个问题

options: { styleIsolation: 'shared' }, // add this
methods: {
  yourFunc1 () {
  }
}

.pet-info{
  ::v-deep .title {
    width: 51px !important;
    background-color: red !important
  }
}

像方法一样在组件中配置它，它与方法是同一级别。

Answer 7

::v-deep 作为组合器的用法已被弃用。使用 :deep() 代替。

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

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

How do I use /deep/ or >>> or ::v-deep in Vue.js?

css

sass

webpack

vue.js

vue-cli

Vue 2

Vue 3 （2022 年 1 月 19 日更新）

Vue 3 新选择器

总结