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

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

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

Answer 1

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

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

Answer 2

可接受的答案在范围内的SCSS中对我不起作用，但这有时可以做到：

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

通常这样做（省略父类）：

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

Answer 3

现在/deep/会被弃用

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

使用component's可以更改任何范围的deep selector css

在这种情况下，请使用::v-deep，因为/deep/将被弃用。

参考-Deep Selector

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

然后，在您消费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>中，如其他人所解释的，它应该在作用域::v-deep上使用scss进行工作。

Answer 6

我通过添加解决了这个问题

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

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

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

我如何使用/ deep /或＆gt;＆gt;＆gt;在Vue.js？

6 个答案: