webpack(バージョン3)でnode_module配下のCSSを読み込む方法

npmでCSSライブラリをインスールして、webpackを使ってビルドするところまでを解説していきます。

今回の検証で使ったwebpackのバージョンは、3.5.5です。

[スポンサーリンク]

今回やること

npmでインストールしたCSSライブラリをHTMLで使えるように、webpack(エントリポイントjs)で設定していきます。

前提条件

npmとwebpackはすでに入っているものとします。(バージョンは3以上がオススメ。)

css-loader style-loaderはインストール済みとしてます。
もしまだでしたら、コチラを参考にインストールをしておいて下さい。

npmもwebpackもまったくはじめてという方は、webpack(Ver3)の公式チュートリアルをやって基本を理解するを参考にどうぞ。

package.jsonの設定

今回使用するCSSライブラリは、こちらを使っていきます。

こちらのCSSライブラリですが、HTML要素にアニメーションをつけることのできるCSSです。
以下のコマンドを実行するとインストールは完了です。

npm install animate.css --save

実行後、package.jsonにハイライト部分が追加されていればOKです。

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "css-loader": "^0.28.7",
    "style-loader": "^0.18.2",
    "webpack": "^3.5.5"
  },
  "dependencies": {
    "animate.css": "^3.5.2"
  }
}

scripts部分ですが、CSSライブラリ読み込みとあまり関係はありません。
ビルドする時のコマンドでwebpackのかわりにnpmを使えるように設定しているだけですので、こちらの追加はお好みで指定して下さい。

また、devDependenciesの部分は必要な部分ですので、あらかじめインスールする必要があります。

css-loaderとstyle-loaderのインストールはコチラを参考に行って下さい。

もしもまだwebpackをインストールしていないようでしたら、こちらのコマンドを実行して下さい。

npm install --save-dev webpack

webpack.config.jsを作成する

先程css-loaderをインストールした際に見てもらいました、コチラと同じ内容のwebpack.config.jsを用意します。

ようは、CSSファイルをビルドの対象となるような設定をwebpack.config.jsへ記述します。

var path = require('path');
  
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
};

index.js

それでは続いて、エントリポイントであるindex.jsファイルにCSSライブラリを読み込む設定をしていきます。

設定は1行目だけでOKです。

npmでCSSライブラリ(Animate CSS)をインストールすると、node_modules配下にanimate.cssというフォルダができて、その中にCSSラブラリがインストールされます。

そのフォルダを読み込み対象とするには、dependenciesに記述したanimate.cssを1行目のようにimportすると読み込み対象となります。

import 'animate.css';
{
    console.log("aaa");
}

index.html

htmlファイル内で、animate.cssが提供しているクラスをHTML要素に設定すると要素を動かすことができます。

<html>
 <head>
   <title>Getting Started</title>
 </head>
 <body>
  <p class="animated bounceOutLeft">test</p>
  <script src="bundle.js"></script>
 </body>
</html>

ビルド

一応念のためビルド方法も載せておきます。

ビルド方法はこのコマンドを実行するのでもいいですし、

webpack

package.jsonにbuildを設定したのであればこちらでもOKです。

npm run build

ビルド後にindex.htmlを開いてみて下さい。

HTML要素がアニメーションで動けばOKです。

さいごに

webpackでCSSライブラリを使用する場合は、自前CSSと同じ設定をしないといけないということだけは覚えておいて下さい。

今後、CSSライブラリもJavaScriptライブラリもnpmで一元管理できると管理する方としてはだいぶ楽になりそうですね。

それでは!