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

css CSS

乐LEY

2020-03-12

因此，我在这里已经读到，在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"
        }
    }
}
// ...

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

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

第967篇《如何在Vue.js中使用/ deep /或>>>？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Eva猿 2020.03.12

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

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

编辑：/ deep /已被弃用，如果它不再对您有用，请参阅解释:: v-deep的其他答案

LEYEvaL 2020.03.12

使用:: v-deep

可接受的答案不适用于范围内的SCSS / SASS，但::v-deep通常可以：

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

如果您不使用SCSS / SASS，请尝试使用以下语法：

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

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

  • sass并且dart-sass不支持/deep/，只有node-sass不
  • Vuetify 2不支持/deep/（因为它不支持node-sass）

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android