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