小编典典

如何在Vue.js中使用/ deep /或>>>?

css

因此,我在这里已经读到,在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>

我与之相关的webpack配置vue-loader如下所示:

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

所以我的问题是,如何让该>>>操作员工作?

我已经找到了这个答案,但我确实在这样做,而且行不通…


阅读 1201

收藏
2020-05-16

共1个答案

小编典典

采用::v-deep

可接受的答案不适用于scopedSASS / SCSS,但可以::v-deep

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

如果您不使用SASS / SCSS,请使用以下>>>语法:

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

使用::v-deep或时>>><style>此组件的标签必须为scoped

<style scoped>

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

  • /deep/语法被弃用
  • sass并且dart-sass不支持/deep/,只有node-sass
  • Vuetify 2不支持/deep/(因为它不支持node-sass
2020-05-16