前回の記事
こちらの記事にコメントで指摘、編集依頼を受け
実践してみてこっちの方がいい!って思ったので修正版を今回は書きます
https://qiita.com/nuxt_suco/items/63797a54a2b09e07efaa#comment-f81740c831acd1c11bf9
いただいた2つのコメント
個人的にはnuxt.config.jsの中に書く。
1.assets/style/reset.scssを作り、中にreset.cssを入れる
2.nuxt.config.jsの中でcssを取り込む
globalなものであれば、ここに入れておくといいかなと
先に、nuxt.config.jsの内容が読まれたあとに、.vueファイルの内容を読むみたい
layouts/default.vue内で読み込んだCSSはページコンポーネント内でlayoutプロパティが省略されていれば読み込まれます。
しかし、404ページなど他のページとはレイアウトの構成が変わるようなページで、新しく「layouts/error.vue」のようなテンプレートを作った場合には引き継がれません。
なのでやっぱり全体に効かせたい場合にはnuxt.config.js内に記述するのがいいですね!
なるほど?ってことは、nuxt.config.jsに記述されてる方が優先度高いんだ!
とりあえずやってみよ
reset.cssをassets配下に置く
aseetsディレクトリーのなかにstyleディレクトリーを作り
assets/style/reset.css
nuxt.config.jsの中でreset.cssを取り込む
css: [
'@/assets/style/reset.css'
],
取り込んだreset.cssをdefault.vueで呼ぶ
<style>
@import "./assets/style/reset.css";
</style>
これで無事適応されました!
他にもdefaultで適応させたいものがあれば複数のcssファイルを
1つのcssファイルにまとめたものを呼べば大丈夫です!
今回参考にしたリンク先
[nuxt.config.jsでのcssの取り込み方について]
https://github.com/nuxt/create-nuxt-app/blob/master/template/nuxt/nuxt.config.js#L54