Scoped css not being applied with lang="scss"

I'm using Quasar and trying to style q-table first column:

<style lang="scss" scoped>
td:first-child {
  background-color: #747480 !important;
}
</style>

However this does not work even after reloading/hot reloading/restarting server whatever.

Removing scoped works fine. I have no idea what is going on. Anyone could provide solution for this problem?

EDIT: Here is working demo:

Codesandbox

Just remove scoped from the style and the color will change.

Update: In Vue 3 the piercing selector is :deep(). e.g:

.qtable :deep(tbody td) {
  white-space: normal;
}

...will produce something along these lines:

.qtable[data-v-f3f3eg9] tbody td {
  white-space: normal;
}

Initial answer:

Warning on using: >>> with lang="scss"!

While >>> seems to work as expected when lang is not specified (or when it's set to css), the same is not true with lang="scss".

The only piercing selectors that work with lang="scss" (in latest 2.x Vue — v2.6.11) are /deep/ and ::v-deep.
What I know for sure is that it's not related to node-sass or dart-sass packages, as I tried with both and it behaves the same. So it's either at Vue package level or at sass package level. But I don't consider downgrading any of those to be a feasible solution

For some reason, >>> gets transformed into > > > when used in scss which, for obvious reasons, makes anything inside that code block no longer apply. What should happen is >>> should be removed and any parts of the selector after that point should no longer have the scoping attribute applied (as it does for the other 2 piercing selectors).

Note it used to work, and I have no idea when or why it stopped working (I've personally always preferred ::v-deep, for no particular reason).

In your case: just wrap everything into ::v-deep {}:

<style lang="scss" scoped>
  ::v-deep {
    td:first-child {
      background-color: #747480; /* no need for !important */
    }
    .q-table tbody td {
      white-space: normal;
    }
  }
</style>

... and they'll apply.