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

所以,我在这里读到,在Vue.js中,您可以使用/deep/或>>>在选择器中创建适用于子组件内部元素的样式规则.但是,尝试在我的样式中使用它,无论是在SCSS中还是在普通的旧CSS中,都不起作用.相反,它们会逐字发送到浏览器,因此无效.例如:

home.vue:

生成的css:

我想要的是:

我的webpack配置vue-loader如下所示:

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

所以我的问题是,如何使这个>>>运算符工作？

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

使用:: v-deep

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

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

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

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

编辑（10/1/2019）：额外信息：

sass并且dart-sass不支持/deep/，只有node-sass不

Vuetify 2不支持/deep/（因为它不支持node-sass）

我已成功使用/ deep /在Vue的SCSS样式表中使用此结构:

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

component's可以使用来更改任何作用域的CSS，deep selector 但是/deep/将不建议使用

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

::v-deep在这种情况下使用，并避免不推荐使用/deep/