vueコンポーネント内でsassを使用するときにディープセレクタを指定する方法

vue コンポーネント内の style を scss にして、その中でディープセレクタを使用したかったのですが、 >>> を使用すると動かなかったので、調べた内容についてまとめました。

<style lang="scss" scoped>
// ここで >>> を使いたい！
>>> .hoge {
// 
}
</style>

ディープセレクタについて

scoped スタイルのセレクタを "deep" にしたい、つまり子コンポーネントに及ぼしたい場合は、>>> コンビネータを使用することができます

::v-deep を使用する

vue-loaderのディープセレクタに下記の記載がありました。

SASS のようないくつかのプリプロセッサは、>>> を適切に解析できないかもしれません。そのようなケースでは /deep/ コンビネータを代わりに使用することができます。それは、>>> のエイリアスで、全く同じような動作します。

ただ、下記の issue によると、実際には /deep/ を使用すると chrome で warning が出るそうで、 ::v-deep を使用するのが良いようです。実際に試したところ、warning ではなくて error が出ました。
https://github.com/vuejs/vue-loader/issues/913

<style lang="scss" scoped>
// >>> をそのまま ::v-deep に変更するだけでOK
::v-deep .hoge {
// 
}
</style>

::v-deep の具体例

::v-deep を使う具体例をみたい場合には、こちらのPRで /deep/ から ::v-deep へ変更を行なっているため、参考になると思います。
https://github.com/aeternity/aepp-base/pull/1347/files

ドキュメントの修正状況

ドキュメントの修正に関しては、変更の提案の issue はあがっていたので、そのうち修正されると思います。
Remove /deep/ from documentation for future releases for Deep Selectors