reset.cssをNuxt.jsに導入する

reset.cssをNuxt.jsのプロジェクトに導入する方法を書きます

リセットCSSを選択する

私はコリスさんのサイトを参考にいつも「A Modern CSS Reset」を使ってます。 どのリセットCSSを導入するかはプロジェクトの都合やお好みで

アイキャッチとか特にないけどシンプルに必要な事が書かれてていい感じ。 スター数も2020/09/27現在 1.4k と多いです。

モダンブラウザをターゲットにしたWeb制作では、CSSにおけるブラウザの互換性の問題はIE6の頃に比べるとはるかに少なくなり、無理なリセットやすべてをリセットする必要はなくなりました。現在のWeb制作に合わせて制作された新しいCSSリセットが、この「A Modern CSS Reset」です。

2020年、モダンブラウザに適したCSSリセットのまとめ | コリスより引用

こちらのサイトもとても参考になります

2020年版！おすすめのリセットCSSまとめ | Web Design Trends

リセットCSSを導入する

2つの方法を記載します。

後半のnpmやyarnを使った方法はA Modern CSS Resetのようにnpmのパッケージとして提供されている場合のみ、の方法になります。

1. cssファイル（scssも可）を追加

今回のようにグローバルに効かせたcssの場合 nuxt.config.js に記載します。

やりたい事は公式がそのまますごく参考になります: API: css プロパティ - NuxtJS

まず公式にならって「assets/css/」に「reset.css」を作成

assets/
  css/
    reset.css

私の場合「A Modern CSS Reset」をそのまままるっと ↓ をコピペ ここはお好きなリセットCSSを選択して下さい modern-css-reset/reset.min.css at master · hankchizljaw/modern-css-reset

あとはnuxt.config.jsで読み込めばOK！

export default {
  ・・・
  css: ['@/assets/css/reset.css'],
  ・・・
}

もしここでscssを読み込ませたい場合は node-sass や sass-loader が必要になるので注意

$ yarn add -D node-sass sass-loader

2.npmパッケージを使って読み込む

modern-css-resetのようにnpmパッケージで公開されている場合のみの方法です！

まずnodeやyarnでパッケージを追加します

$ yarn add modern-css-reset

あとは先程と同じようにnuxt.config.jsで読み込むだけ、簡単！

export default {
  ・・・
  css: ['modern-css-reset'],
  ・・・
}

これでリロードをすると以下のように reset.css が読み込まれるようになっています

（余談の考察）パッケージの場合の記載方法について

nuxt.config.jsでcssを読み込む際に以下のよう記載しました

export default {
  ・・・
  css: ['modern-css-reset'],
  ・・・
}

ここの css: ['modern-css-reset'], てどういう挙動をするんだろう？と思ったので軽く調査してみました。

「@/フォルダ名」や「/フォルダ名」ではなくいきなり文字列を渡した場合、多分「node_modules/」のフォルダを検索してそうな気がします

node_modules/
  modern-css-reset/

今回の「modern-css-reset」のpackage.jsonには以下のように書かれているので

{
  "name": "modern-css-reset",
  "version": "1.1.1",
  "description": "A bare-bones CSS reset for modern web development",
  "main": "./dist/reset.min.css",
  ・・・
}

以下の「reset.min.css」を読み込んでくれていそう！

node_modules/
  modern-css-reset/
    dist/
      reset.min.css

つまり css: ['modern-css-reset'], という書き方は以下と同義になりそうな気がします

export default {
  ・・・
  css: ['/node_modules/modern-css-reset/dist/reset.min.css'],
  ・・・
}