我如何使用/deep/或 >>>或 ::v-deep 在 Vue.js 中? [英] How do I use /deep/ or >>> or ::v-deep in 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?

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

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

推荐答案

Vue 2

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

Sass: 使用 ::v-deep

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

不使用 Sass: 使用 >>>

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

无论使用哪种语法，此组件的