タイトルの通り、WebpackerでのMaterializeの導入方法をご紹介します。

使ってみて思ったことは、分かりやすく綺麗なコンポーネントを使え、開発が楽しくなるなということです。

Googleさん、本当ありがとうございます。

以下手順です。

前提

まず前提として筆者の作業環境は以下となっています。

Materializeのインストール

以下のコマンドを実行します。

$ yarn add materialize-css

これにより、npmパッケージのmaterialize-cssがインストールされます。

Rails6でmaterialize-cssを適用する

Webpackerの構成はエントリーポイントという概念があり、このエントリーポイントをviewで読み込むことでエントリーポイントに登録されているjsやcssを読み込むことができます。

詳しくは別途調べて頂ければと思います。

materialize-cssを読み込むためのエントリーポイントを作成

app > javascript > packs ディレクトリの中にapplication_style.jsというファイルを作成します。

この中に以下を記述します。

import "../styles/index.scss";

そして app > javascript > styles ディレクトリの中に index.scssファイルを作り以下を記述します。

@import "materialize-css/dist/css/materialize.min.css";

エントリーポイントをviewで読み込む

作成したエントリーポイントをviewから読み込みましょう。

大体の場合、全てのページで適用したいと思いますので、 app > views > layouts > application.html.erb のheadタグの中に以下を記述します。

<%= stylesheet_pack_tag 'application_style' %>
<%= javascript_pack_tag 'application_style' %>

これでMaterializeのCSSが適用されたと思います。

しかし、これではまだ未完了です。

というのもこれではJavaScriptが動作しません。以降でJavaScriptを動作出来るようにします。

JavaScriptを動作可能に

作業は簡単です。

app > javascript > packs > application.js ファイルに以下の行を追加するだけです。

import "materialize-css/dist/js/materialize.min.js";
M.AutoInit();

M.AutoInit(); でJavaScriptのイベントリスナーの初期化などを行なっているようですね。

これでDropdownメニューなどの動きのついたものも動作するようになります。

以上で方法の説明を終わりたいと思います。

お役に立てられれば幸いです。