Scoped styles

[kvasov]

if I use scoped styles in a vue file, then the styles have data-v, and the element does not have

<style lang="scss" scoped>
li.is-disabled a {
  color: red !important;
}
</style>

in browser:

.newPost .form .tabs-component ul.tabs-component-tabs li.is-disabled a[data-v-0de4e860] {
    color: red !important;
}

<li role="presentation" class="tabs-component-tab is-disabled">
  <a aria-controls="#" href="#" role="tab" class="tabs-component-tab-a">Photos</a>
</li>

[Dax Chen]

Hi @kvasov, Vue loader now supports /deep/ for scoped styles to opt out hashing from a portion of the child tree.

Some reported >>> works in SASS/SCSS too, but sometimes it doesn't work for me, so I use /deep/ in the example below.

.tabs-component {
  color: #4a4a4a;
  border-bottom: 1px solid #ececec;
  & /deep/ .tabs-component-tabs {
    display: flex;
    padding: 0;
    .tabs-component-tab {
      list-style: none;
      font-weight: bold;
      > a {
        text-decoration: none;
        display: inline-block;
        padding: 20px 25px;
        color: inherit;
      }
      &.is-active {
        background: #eee;
      }
    }
  }
  & /deep/ .tabs-component-panels {
    .tabs-component-panel {
      padding-top: 20px;
      color: #4a4a4a;
      font-size: 16px;
    }
  }
}

[Sebastian De Deyne]

What does your html template look like?

[kvasov]

@sebastiandedeyne

[kvasov]

@DaxChen Thank you, I will try

[Sebastian De Deyne]

I assume this is resolved? Feel free to reopen if this is still an issue.