我如何使用/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...

推荐答案

使用::v-deep

Use ::v-deep

在scoped SASS/SCSS中，接受的答案对我不起作用，但::v-deep确实对我有用:

The accepted answer wasn't working for me in scoped SASS/SCSS, but ::v-deep did:

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

如果您不使用SASS/SCSS，请使用>>>语法:

If you're not using SASS/SCSS, use the >>> syntax:

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

对于::v-deep或>>>，此组件的<style>标记必须为scoped:

With either ::v-deep or >>>, the <style> tag for this component must be scoped:

<style scoped>

编辑(10/1/2019):额外信息:

• /deep/语法已被弃用
• sass和dart-sass不支持/deep/，只有node-sass支持
• Vuetify 2不支持/deep/(因为它不支持node-sass)

• The /deep/ syntax is being deprecated
• sass and dart-sass do not support /deep/, only node-sass does
• Vuetify 2 does not support /deep/ (since it does not support node-sass)

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