今夜はロールバック!

ただの日記です。

TOP

Webpack 「node_modules」配下のCSSを読み込む方法

f:id:momogaaaa:20180510232540j:plain

Webpackで 「node_modules」配下のCSSを読み込む方法。

 npmでインストールしたライブラリのCSSも読み込み、そしてCSS内のクラスを自由にHTMLで使うことができるのでその方法を記述していく。

 

以下の「animate.css」を例に、npmでインストールした「node_modules」配下のCSSを読み込んでいこう。

f:id:momogaaaa:20180524234030j:plain

 

上記のCSSを読み込むには、この記述を自前のCSS(例えばstyle.cssとか)の先頭に書いておけばよい。

@import "~animate.css/animate.css";

 

上記を1文書くだけで、HTML内でそのCSSのclassを使うことができる。

覚え方としては、/node_modules部分を~(チルダ)に置き換えるだけだ。

 

さいごに

実は、npmでインストールしたモジュールのCSSを直接読むという場面には幸運なことに、今まで遭遇していない。 

まあ、そのような場面には遭遇しない方がよいのだが、もし近い将来そういう場面に出くわしてしまった時のために今回は備忘録としてメモを残しておくことにした。