Posted at

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

More than 1 year has passed since last update.

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するようにしたほうが、アップデートの追従もしやすく取り回しも楽で良いかと思います。