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/」という記法を追加したようです。
