スコープ付きCSSで別のコンポーネントにスタイルを当てる - Qiita

書かれなかったみたいなので、代わりに先日投稿したものを紹介します。 Vue.jsを使っているときに、scoped内で別のコンポーネントにスタイルを当てるときにはまったので備忘録として残しておきます。 概要 scopedを使っている際に親のコンポーネントで子のコンポーネントのスタイルを変更しようとしても、別のスコープとなるため変更できません。 グローバルに書いていくという手もありますが、するとSFCの利点が得られませんし、すぐに管理できなくなります 外部で定義された汎用コンポーネントとかを使う場合によく遭遇します。 例 簡単な例で確認していきます。 ※ pugとsassを使っています 子コンポーネント デフォルトで赤色のテキストを表示するだけのコンポーネントです。 <template lang="pug"> .child-container .child-layout p.title Chi