0

I'm trying to get a child/deep selector going within SCSS. However the output css is not as expected. This issue is similar to How do I use /deep/ or >>> in Vue.js? However they use webpack and vue-loader rather then parcel.

I've tried:

.example >>> .example-child {
    font-size: 20px;
}

This however generates

.example > .example-child[data-v-bb9328] {
  font-size: 20px;
}

While I would need the following:

.example[data-v-bb9328] > .example-child {
  font-size: 20px;
}

The Parcel documentation is quite barebone and I couldn't really find any notes in regards to this in the github. Is this not a supported feature or am I just not seeing something?

Lucas T
  • 1
  • 1

1 Answers1

0

Check this:

<template>
  <div>
    <div class="example">
      <div class="example-child">...</div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'TestExample',
  }
</script>
<style lang="scss" scoped>
  .example::v-deep {
    .example-child {
      border: 1px solid red;
    }
  }
</style>

It produces:

<style type="text/css">
.example[data-v-b07474d4] .example-child{
  border:1px solid red;
}
</style>
Daniel
  • 2,621
  • 2
  • 18
  • 34
  • Didn't do the trick, it ended up being parsed to ```.example::v-deep .example-child[data-v-bb9328] {``` – Lucas T Aug 09 '19 at 07:51
  • It's weird. In my case it works like a charm. Take a look on updated answer. – Daniel Aug 09 '19 at 13:53
  • Tried your full block, still the same result. What are you using as setup? Are you using parcel as well? If so I can see if I can get this to reproduce in a small dummy project. – Lucas T Aug 09 '19 at 14:41
  • Sorry, I didn't notice that we talking about parcel. I'm using Webpack 4. – Daniel Aug 09 '19 at 14:50