Deep selector not working

Get Help
#1

Well, I tried /deep/, >>> and ::v-deep but all did not work and I don’t know why.
I use vueify to compile with Vue 2.6 version

.range-slider /deep/ .range-slider-fill{
		background-color: #009688;
	}
	.range-slider >>> .range-slider-fill{
		background-color: #009688;
	}
	.range-slider::v-deep .range-slider-fill{
		background-color: #009688;
	}

08%20PM

Somehow I manage but still theres something wrong with the output .range-slider :global(.range-slider-fill)

45%20PM

Update: I guess this issue was caused because of vueify it might be because on how it loads I guess.
SCSS /deep/ implementation from vue-loader

1 Like
#2

Hi, are you using deep selectors in scoped?

https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles

#3

Yes I am

<style type="text/css" lang="scss" scoped="">
	.test >>> .test-child{
		padding: 0;
	}
</style>

31%20AM

1 Like
#4

Did you ever find a solution to this? I am facing this problem now too.

Thanks

#5

Appently, this might not be cause on VueJS but in node-sass or something. I already give up on this problem, but I found an alternative. Just avoid using child base css I guess

#6

I found a solution to this just remove the lang=‘scss’, don’t know how,
Solution where I found

#7

but removing lang=‘scss’ will not parse the content to make it css formated :frowning:

1 Like
#8

In my case I’m using Vueify, I have to edit such file which they didn’t added also its already deprecated :frowning:

#9

Have you resolved this problem?

I encountered same problem after reinstalled dependencies

my code:

<style lang="scss" scoped>
.aaa {
  >>> .bbb {
    color: #987654;
  }
}
</style>

which is compiled to

<style type="text/css">.aaa > > > .bbb[data-v-beb22bc6] {
  color: #987654;
}</style>
#10

::v-deep is working for me using scoped and scss:

1 Like
#11

I tried to style an embedded b-table component using ::v-deep, which did work in one component, but not in the other. I realized that the embedded component cannot be the root element, ie. it needs to be wrapped in a div or another container element. Then ::v-deep works as expected:

<template>
<div>
    <b-table hover bordered class="inbound-day">
    </b-table>
</div>
</template>

<style scoped lang="scss">

::v-deep .inbound-day {

    background-color: $white;

}

</style>
3 Likes
#12

This works!