Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

前回の記事

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

https://ja.nuxtjs.org/api/configuration-css/

macololidoll
Qiita書いたほうがいいと言われたの書いてみてます、間違いあればコメントやTwiiterで教えてください。生暖かい目でお願いしますw
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした