Как использовать/deep/или >>> в Vue.js?

Итак, я прочитал здесь, что в 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"
        }
    }
}
// ...

Итак, мой вопрос, как мне заставить этот оператор >>> работать?

Я уже нашел этот ответ, но я делаю именно это, и он не работает...

Ответы

Ответ 1

Я успешно использовал /deep/в таблицах стилей SCSS Vue со следующей структурой:

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

Изменить: /deep/устарела, если он больше не работает для вас, пожалуйста, обратитесь к другому ответу, который объясняет :: v-deep

Ответ 2

Используйте :: v-deep

Принятый ответ не работал для меня в SCSS с определенными областями, но иногда это сработало:

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

И это обычно так (без учета родительского класса):

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

РЕДАКТ. (01.10.2009): дополнительная информация :

  • sass и dart-sass не поддерживают /deep/, только node-sass поддерживает
  • Vuetify 2 не поддерживает /deep/ (так как он не поддерживает node-sass)

Ответ 3

Теперь раньше /deep/ устареет

Ссылка на Vue Github - https://github.com/vuejs/vue-loader/issues/913

Любая область действия component css может быть изменена с помощью deep selector

В этом случае используйте ::v-deep, так как /deep/ устареет.

Справочник - Deep Selector

Просто проверьте класс визуализированного element, который вы хотите изменить, используя devtools в chrome или любой консоли браузера.

Затем, если вы потребляете component, измените его

<style scoped>
::v-deep .custom-component-class {
   background: red; //
}
</style>