はじめに
遅ればせながらRails6触り始めました。
Rails6から標準のjsコンパイラがwebpackerに変更になったので、これまで通りにmaterializeを導入してもjs関連のいろいろが機能しません。今回は少し無理やりな方法ですが、「旧バージョンでmaterialieを導入済みで、rails6にアップグレードしてみたorしてみたい」人向けにとりあえず動かす方法の一案です。
なお、これから新規にアプリケーションを作成する場合はこちらの記事が参考になると思います。
How to install materialize-css on Rails 6.0.0.beta2 using Webpack
1. 準備
検証用に新規アプリケーションを立ち上げ、適当にscaffoldします。
からのGemfileにmaterializeを追加してbundle install
# materialize
gem 'materialize-sass'
app/assets/stylesheets/application.scssにてmaterializeをインポート
@import 'materialize';
適当なviewファイルにinputを設置してみます。
<%# 省略 %>
<div class="input-field">
<input type="text" id="name" name='name'>
<label for="name">name</label>
</div>
2. 確認
上にピュッと移動するラベルが機能しませんね。アプリケーションをrails6にアップデートしたての方は同じような状況ではないでしょうか？
3. yarnでmaterialize-cssをインストール
該当アプリケーションのディレクトリに移動して
$ yarn add materialize-css
ちょっとRails6っぽいです。
app/javascript/packs/application.jsに以下を追記
import 'materialize-css/dist/js/materialize'
4. yarnでjqueryをインストール
Introducing jQuery in Rails 6 Using Webpackerこちらを参考にインストール願います。非常によくまとまってるのでペタペタしてるだけで1分程度で完了します。
5. 再度確認
ぴょこぴょこ動いてますね。ここでは検証しませんが、その他のjsがらみのmaterialize(dropdownとかcollapsible)も私の環境では動いていることを確認しています。
6. 備考
今回は応急処置的な方法ということでgemとyarnで2種類のmaterializeをインストールしているため、ややお行儀の悪い感じがします。冒頭に貼った参考ではcssの読み込みもwebpackにやらせる方法が示されているので、気が向いたらお引越ししていこうかなと思います。
ちなみに、旧バージョンからのアップデートの場合はconfig/webpacker.ymlでwebpackのファイル探索範囲に旧assets下のjavascriptを追加するというのもありです。
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: ['app/assets']
以上、お困りの方の参考になれば幸いです。
7. 参考
How to install materialize-css on Rails 6.0.0.beta2 using Webpack
Introducing jQuery in Rails 6 Using Webpacker
