Vue scoped style を親コンポーネントから子コンポーネントへ影響させる

この記事は ShoTime Advent Calendar 2018 の 6 日目の記事です。

スコープについて

Vue.js のシングルファイルコンポーネント（以降 SFC）に記述する <style> で scoped にすると、そのコンポーネントだけに影響を与えるスタイルを記述することが可能です。

<style scoped>
.example {
  color: red;
}
</style>

Vue Loader

SFC は webpack の loader である Vue Loader を使います。SFC で調べたいことがあった場合、Vue Loader を参照するとドキュメントが充実しているのでヒントが見つかるかもしれません。

親コンポーネントから子コンポーネントのスタイルをスコープで書きたい

この書き方についてもドキュメントに記載されています。

# Deep Selectors | Scoped CSS | Vue Loader

<style scoped>
.a >>> .b {
  color: red;
}
</style>

>>> を使うことで、子コンポーネントに影響を与えるスタイルを記述することが可能です。一部のプリプロセッサーでは >>> ではなく /deep/ と記述します。