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

问题描述

因此，我在Vue中阅读了此处.js，您可以在选择器中使用/deep/或>>> ，以创建应用于子组件内部元素的样式规则.但是，无论是在SCSS还是普通的CSS中，尝试以我的样式使用它均无效.而是将它们原样发送到浏览器，因此无效.例如:

So, I've read here that in Vue.js, you can use /deep/ or >>> in a selector in order to create style rules that apply to elements inside of child components. However, attempting to use this in my styles, whether in SCSS or in plain old CSS, doesn't work. Instead, they are sent to the browser verbatim, and therefore have no effect. For example:

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配置如下:

My webpack configuration pertaining to vue-loader looks like this:

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

所以我的问题是，如何使此>>> 运算符起作用?

So my question is, how do I get this >>> operator to work?

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

I've already found this answer, but I'm doing exactly that and it doesn't work...

推荐答案

Vue 2

Sass:.使用 :: v-deep

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

不使用Sass:.使用>>>

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

使用任何一种语法，必须对该组件的< style> 标签进行作用域:

With either syntax, the <style> tag for this component must be scoped:

<style scoped>

---

Vue 3

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

---

Vue 3

In Vue 3, we no longer need >>> and can use the unified ::v-deep selector whether using Sass or not, but now it's recommended to use parentheses with the selector.

使用 :: v-deep(.child-class)

Use ::v-deep(.child-class)

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

此外，在Vue 3中，具有< slot> 的组件有一种新语法，可以对传递的插槽内容进行样式设置.

Additionally, in Vue 3, there is a new syntax for components with a <slot> that enables styling passed slot content.

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

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

最后，在Vue 3中，有一种新语法可以注册全局样式，甚至可以从 scoped 组件中注册全局样式:

And lastly, in Vue 3, there is a new syntax to register global styles even from a scoped component:

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

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

使用任何语法，必须对该组件的< style> 标签进行作用域:

With any syntax, the <style> tag for this component must be scoped:

<style scoped>

---

摘要

在Vue 2中:

---

Summary

In Vue 2:

• 已弃用/deep/语法
• 在Sass中使用 :: v-deep ，在不使用Sass的情况下使用>>>

• The /deep/ syntax is deprecated
• Use ::v-deep with Sass, use >>> without Sass

在Vue 3中:

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

• ::v-deep .child-class is deprecated in favor of ::v-deep(.child-class)
• The >>> syntax is deprecated
• The /deep/ syntax is deprecated
• There are new ::v-slotted and ::v-global selectors

对于每个版本/语法，必须对该组件的< style> 标签进行作用域:

With every version/syntax, the <style> tag for this component must be scoped:

<style scoped>

这篇关于我如何使用/deep/或>>>或:: v-deep在Vue.js中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！