>>>或:: v-deep在Vue项目中不起作用

Question

我目前想在我的Laravel / Vue项目中将/deep/替换为::v-deep或>>>，因为它已被弃用。但是唯一有效的方法是/deep/，其他选项似乎无效。例如，我的组件中有这种样式：

<style scoped>
.v-data-table
  >>>
  tbody
  >>>
  tr:hover:not(.v-data-table__expanded__content) {
  background: #ffffff !important;
}

.v-data-table >>> tr {
  height: 60px;
}
</style>

仅当我使用/deep/时有效，>>>无效。我不知道这与我使用的软件包或webpack配置有关。我最近更新了我所有的NPM软件包，这是我的package.json：

"devDependencies": {
    "axios": "^0.19.2",
    "bootstrap": "^4.0.0",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.13",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.26.3",
    "sass-loader": "7.*",
    "vue": "^2.5.17",
},
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.12.1",
    "secure-ls": "^1.2.6",
    "vue-i18n": "^8.15.5",
    "vue-router": "^3.1.6",
    "vuetify": "^2.2.17",
    "vuex": "^3.1.3",
    "vuex-persistedstate": "^2.7.1"
}

和我的webpack.mix.js配置：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .options({
        postCss: [
            require('autoprefixer'),
        ],
    })

我当前缺少什么，因为我无法使用新的深度选择器？任何帮助表示赞赏。

更新：

整个组件看起来像这样：

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :disable-sort="true"
    :item-key="itemKey"
    :disable-pagination="true"
    :hide-default-footer="true"
    :search="search"
  >
    <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </v-data-table>
</template>

<script>
export default {
  name: "BaseDataTable",
  props: {
    headers: Array,
    items: Array,
    itemKey: {
      type: String,
      default: "id"
    },
    search: {
      type: String,
      required: false
    }
  }
};
</script>

<style scoped>
.v-data-table
  /deep/
  tbody
  /deep/
  tr:hover:not(.v-data-table__expanded__content) {
  background: #ffffff !important;
}

.v-data-table /deep/ tr {
  height: 60px;
}
</style>

Answer 1

>>>不适用于SCSS / SASS，并且不建议使用/deep/，请使用::v-deep。假设v-data-table位于子组件中，请尝试：

::v-deep .v-data-table tbody tr:hover:not(.v-data-table__expanded__content) {
  background: #ffffff !important;
}

::v-deep .v-data-table tr {
  height: 60px;
}

父组件上的<style>标签必须为scoped：

<style scoped lang="scss">