Vue.jsで外部コンポーネントにCSSを割り当てたいときがあると思います。大体は親コンポーネントから子コンポーネントへの干渉ではないでしょうか。

そんなときはディープセレクタを使用します。以下は「ChildComponent.vue」という名前のコンポーネント内の「.child-element」クラスに割り当てた例です。

<template>
  <div class="parent-component">
    <child-component />
  </div>
</template>

<script>
import ChildComponent from 'ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}
</script>

<style scoped>
.parent-component >>> .child-element {
  color: #000;
}
</style>

通常のCSS構文であれば上記のように「>>>」のディープセレクタで解決しますが、「lang=”scss”」などとSass構文かつScoped設定だと、この記法ではスタイリングされません。

Scoped設定かつSass構文の場合は別のディープセレクタ記法にする

Scoped設定＆Sass構文の場合のディープセレクタは、「>>>」ではなく「/deep/」という記法にすることで有効になります。以下のように記述します。

<template>
  <div class="parent-component">
    <child-component />
  </div>
</template>

<script>
import ChildComponent from 'ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}
</script>

<style scoped lang="scss">
// 有効な記法
.parent-component {
  & /deep/ .child-element {
    color: #000;
  }
}

// 無効になってしまう記法
.parent-component {
  & >>> .child-element {
    color: #000;
  }
}
</style>

これで解決しました。

---

issueに書いてあって、SCSSでは「>>>」の解析が出来ないので「/deep/」という記法を追加したようです。