TL;DL

nuxtでcomponentを利用したlayoutを組んでpageを作成したら、スタイルが適用されなくて困った

styleをscopedのまま子ページまで効かせたい

deep selector を利用することで解決した

環境

nuxt ^2.15.3
sass-loader ^10.1.0

スタイルが効かない

nuxtでWebサービスを作成しているとき、レイアウトに記述したスタイルがページに適用されていないことに気づきました。

一時的に<style>のscopedを外すことで対応していたのですが、毛色の違う別のレイアウトを用意することになり、本格的に対応が必要になりました。

また、自分の開発形態が特殊で実際のレイアウトはcomponentsに用意してlayoutsの方から呼び出す形式をとっていました。
以下に簡単なサンプルを用意しています。

components
∟TestLayout.vue
layouts
∟test.vue
pages
∟testPage.vue

// TestLayout.vue
<template>
  <div>
    <h1>テスト</h1>
    <nuxt-child />
  </div>
</template>

<style lang="scss" scoped>
.hoge {
  color: aqua;
}
</style>

// test.vue
<template>
  <test-layout>
    <Nuxt />
  </test-layout>
</template>

<script>
import TestLayout from '../components/TestLayout'
export default {
  components: {
    TestLayout,
  },
}
</script>

// testPage.vue
<template>
  <div>
    <p class="hoge">コンテンツ！</p>
  </div>
</template>

<script>
export default {
  layout: 'test',
}
</script>

TestLayout.vueで定義した.hogeクラスをtestPage.vueに適用したいのですが、このままではダメです。

Deep Selector

詳細は分かりませんが、scopedのスタイルを子コンポーネントに及ぼしたい場合に利用できるものみたいです。

書き方としては、>>>、/deep/、::v-deepなどがあるみたいですが今回は::v-deepを採用しました。

scssなら下記のように囲ってあげるだけで大丈夫です。

// TestLayout.vue
<template>
  <div>
    <h1>テスト</h1>
    <nuxt-child />
  </div>
</template>

<style lang="scss" scoped>
::v-deep {
  .hoge {
    color: red;
  }
}
</style>

参考