Webpackを学んだが、Tailwindを雰囲気で使っていたことがバレた

今日は下記の動画を見ながら、webpackとは何かを学び、サンプルのappを使って実際にコンパイルするところまで実践した。

参考動画： https://www.youtube.com/watch?v=7I8Eyf6vKbQ
↑スムーズに学習できました〜🙏

で、動画ではrailsも何もない環境でwebpackを学んだわけだが、実際に自分のappに落とし込もう！と思ったのだが、Javascriptのファイルたくさんあるし、そもそもgemにwebpackerという似たようなものがあるし、何をすればいいかわからなくなってしまった。
そんな中悩んでいたら下記の記事に出会い、WebpackとWebpackerは違うものだよという重要なことを教えてくれた。

出会った記事：
https://www.sejuku.net/blog/68146 
これ読んでなかったらwebpackに手も足もでなかった、、、

Webpackerはrails用のバンドラーのことで、rails6は標準でGemに追加されているらしい。実際に自分のコードを見てみるとgemにwebpackerもあるし、設定ファイルも全てあり、すでにWebpackが使える状態だった。

またWebpackはjsファイル以外にもCSSや画像もバンドルできるということで、今まで使っていたTailwindCSSで作られたcssも一緒にすることにした。
しかしビルドをした瞬間何故か全てのCSSが消えてしまった。今日はこのエラーを残したまま終了してしまった。

Tailwindcssについてはいつかガタが来るとは予想していて、いろんな記事をかじったせいでnpmやyarnのコマンドがミックスしているという悲惨な状態だった。ここでも新しい技術を導入するときはサンプルのappで試して成功パターンを掴んでから自分のappに導入することの重要性を再認識した。

明日は1からTailwindcssをyarnで再導入し(もちろんサンプルappで)、自分のappに反映させてから、webpakerの導入に軌道を戻したい。