How to change this Vue3 ::v-deep SASS syntax to use :deep?

Question

HTML:

<template>
 <form class="bg-white">
  <div class="source-field">
...

Here's the original SASS:

.form::v-deep
  .source-field
    width: 129px
    display: inline-block
    margin: 0px 2px 5px 2px

Changing it to this does not work, none of the styles apply anymore:

:deep(.form)
  .source-field
    width: 129px
    display: inline-block
    margin: 0px 2px 5px 2px

This works too:

::v-deep
  .source-field
    width: 129px
    display: inline-block
    margin: 0px 2px 5px 2px

But this does not:

:deep()
  .source-field
    width: 129px
    display: inline-block
    margin: 0px 2px 5px 2px

score 0 · Answer 1 · answered Jul 28 '22 at 18:36

Documentation: https://vuejs.org/api/sfc-css-features.html#scoped-css

If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the :deep() pseudo-class:
<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

An answer with a good explanation: https://stackoverflow.com/a/55368933

Solution for your case:

You basically have .form::v-deep .source-field, where .form is the accessible parent that you want to take as the base, which can also be written as .form >>> .source-field(SASS can't parse it, but it's an example for understanding it). So, with the new :deep(), you combine it with the parent before it and pass the child name as a "parameter". (e.g. .parent :deep(.child))

Given all these, for your case the solution would be .form :deep(.source-field), if you want to keep the nested selectors, you can do:

.form
  :deep(.source-field)
    width: 129px
    display: inline-block
    margin: 0px 2px 5px 2px

How to change this Vue3 ::v-deep SASS syntax to use :deep?

1 Answers1