この記事は 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 を参照するとドキュメントが充実しているのでヒントが見つかるかもしれません。

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

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

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