React+webpackにnormalize.cssを導入する

いわゆる、リセットCSSの導入です。これを導入しないと、ブラウザによって異なるデフォルトのCSSが適用され、意図したスタイルにならなかったり、ブラウザによってスタイルが変わってしまうという問題が発生します。

どのリセットCSSを選ぶべきか？

リセットCSSの詳細は比較については、こちらのサイトにまとめられているので、参考にさせていただきました。正直、自分はそこまでこだわりがなかったので、npm trendsで一通り検索して、導入実績のありそうだったnormalize.cssを導入しました。

導入方法

まず、normalize.cssをインストールします。

yarn add normalize.css

続いて、cssを読み込めるようにwebpackの設定を行います。

まずはloaderのインストールから

yarn add --dev style-loader css-loader

webpackの設定に以下を追加します。

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }],
      },
    ],
  },

あとは、indexなどで読み込むだけです。

import "normalize.css";

以上で完了です。