CSS
vue.js

Vueプロジェクトでnormalize.cssを読み込む方法

ResetCSSとして人気のあるnormalize.cssをvueのプロジェクトで使ってみました。
その際に、どのように読み込ませるか迷ったので、自分の採用したやり方を記録しておきます。

前提

  • vue-cliを使用
  • webpackテンプレートでプロジェクトを作成

normalize.cssをインストール

normalize.cssはnpmでインストール可能です。
まず、npmでインストールを行いましょう。

$ npm install -D normalize.css

App.vueファイルでimport

つぎに、Vueアプリケーションのルートとなるvueファイルにて、先ほどインストールした normalize.css をimportします。
vue-cliでwebpackテンプレートを使用してプロジェクトを作成した場合は、 App.vue にimportします。

下記のように <script> ブロックに import 'normalize.css' を追記しましょう。

<script>
import 'normalize.css'

export default {
  name: 'App'
}
</script>

完了!

以上で、これだけの手順でnormalize.cssを読み込ませることができます。

本来であれば、webpackのcss-loader等を別途インストールし、webpackのconfigファイルに設定する必要がありますが、vue-cliのwebpackテンプレートを使用している場合、すでにそれらがインストールされているので設定不要ですぐに使い始めることが可能です。

上記の方法以外にも、normalize.cssファイルをダウンロードし、 static ディレクトリに配置した上で、index.htmlにてcssファイルを読み込ませる方法もあります。
しかし、npmを用いてインストールし、webpackでひとつのファイルにbuildするようにしたほうが、アップデートの追従もしやすく取り回しも楽で良いかと思います。