Nuxt.jsでNormalize.cssを使う

前置き

僕はWebページを作るときはまずNormalize.cssを使って、開発しやすい状態にしてから初めています。
単にスタイルをまっさらにするのではなく、いい感じにブラウザ間の差異をなんとかしてくれたりするニクいやつなのですが、毎回ダウンロードしてはスタイルシートの置き場に配置して〜という手順や、最新バージョンが発表された時に置き換えたりするのは地味に面倒だったりします。

そんなNormalize.cssの公式npmがあるということを知り、またNuxt.jsにおいて導入してみたら思ったよりササーッとできたので共有しておこうと思います。

手順

ダウンロード

まずはnpmなりyarnなりでインストールします。

npmの場合

npm install --save normalize.css

yarnの場合

yarn add normalize.css

設定

次にnuxt.config.jsに以下の設定を追加します。

nuxt.config.js

module.exports = {
  //　省略
  css: [
    'normalize.css'
  ]
  //　省略
}

以上でNormalize.cssが適用された状態でページが表示されるようになります。

まとめ

これまでNormalize.cssを愚直に使っていたのに比べると、かなり楽に設定することができました。バージョン追うのも楽になります。
手順の通りにやったのに出来ない場合や、不適切な記載があった場合はご指摘いただけますと助かります。