Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

nuxtでreset CSSを記述する場所がわからなかった話(修正版)

前回の記事

こちらの記事にコメントで指摘、編集依頼を受け
実践してみてこっちの方がいい!って思ったので修正版を今回は書きます
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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
11
Help us understand the problem. What are the problem?