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>