>>> или :: v-deep не работает в Vue проекте - PullRequest
Новая
       19

>>> или :: v-deep не работает в Vue проекте

0 голосов
/ 15 марта 2020

В настоящее время я хочу заменить /deep/ на ::v-deep или >>> в моем проекте Laravel / Vue, поскольку он устарел. Но единственное, что продолжает работать, это /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/, >>> ничего не делает. Я не знаю, связано ли это с моими использованными пакетами или конфигурацией веб-пакета. Я недавно обновил все свои NPM пакеты, это мой пакет. 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 config: 

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>
...