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

  • 更新日:
  • 公開日:

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

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone