how to use :deep(.className) in vue 2 - sass

Question

i have working scss styles
.alert {
::v-deep .v-alert__border {
top: 8px;
bottom: 8px;
border-radius: 200px;
}
&:not(&--rtl) {
// styles
}
}
I want to redo these styles like this.
.alert {
:deep(.v-alert__border) {
top: 8px;
bottom: 8px;
border-radius: 200px;
}
&:not(&--rtl) {
// styles
}
}
The problem is that it doesn't work.
I use
"vue": "^2.6.11",
Found information that this functionality is not supported in "vue": "^2.6.11",.
Is it really not supported or am I doing something wrong?

Answer 1

Looking at the discussion found here: https://github.com/vuejs/core/issues/4745
Every example starts with :deep and never nested?
:deep(.alert.v-alert__border) {
top: 8px;
bottom: 8px;
border-radius: 200px;
}
:deep(.alert) {
.v-alert__border {
top: 8px;
bottom: 8px;
border-radius: 200px;
}
}
Perhaps one of those two works?

Answer 2

I tested these codes and they works for me. I am using vue version 2.6.11 and vue cli version 4.5 and sass version 1.26.5:
parent component:
<template>
<section>
<div class="myParent">
<ChildAlert></ChildAlert>
</div>
<ChildAlert></ChildAlert>
</section>
</template>
<script>
import ChildAlert from "./ChildAlert";
export default {
name: "AlertCompo",
components: {
ChildAlert
}
}
</script>
<style scoped lang="scss">
.myParent {
background-color: #000;
:deep(.myTitle) {
color: red;
}
}
</style>
child component:
<template>
<section>
<h1 class="myTitle">this is Child component</h1>
</section>
</template>
<script>
export default {
name: "ChildAlert"
}
</script>
<style scoped>
</style>