【Vue.js】Scoped設定のSassで外部コンポーネントをスタイリングする

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

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

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

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

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

これで解決しました。


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

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/vue-scoped-sass-deep-selector/trackback/