Qiitaの記事を参考にyarnでインストールしてみましたが、ボタンの背景が青になる筈の所が透過に。
また、最新の5ではなく4がインストールされたので、別の方法を試しました。
と言っても、単純にダウンロードしたCSSとJSを設置しただけですが。
ダウンロード
https://mdbootstrap.com/docs/standard/getting-started/installation/
解凍して設置
追記：mdb.rtl.min.cssも一緒に入れるとデザインが崩れるので外しました。
追記：jsをheadで読むとハンバーガーメニューのリストが出ないので、Webpackで管理するのをやめました。cssも同じように管理したいので、public配下に変更しました。
css/mdb.min.css css/mdb.min.css.map ← デバッグ用に追加css/mdb.rtl.min.css を、app/assets/stylesheets/ にコピーを、public/css/ を作成してコピー
js/mdb.min.js js/mdb.min.js.map ← デバッグ用に追加を、app/javascript/ にコピーを、public/js/ を作成してコピー
app/javascript/packs/application.js に追加
require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") + require("mdb.min")
app/views/layouts/application.html.erb に追加
<!DOCTYPE html>
- <html>
+ <html lang="ja">
<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+ <meta http-equiv="x-ua-compatible" content="ie=edge" />
<title><%= t('app_name') %></title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
+ <link rel="stylesheet" href="<%= config.asset_host %>/css/mdb.min.css?v3.1.0" />
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
＜省略＞
</body>
+ <script type="text/javascript" src="<%= config.asset_host %>/js/mdb.min.js?v3.1.0"></script>
</html>
追記：ダウンロードしたファイルのindex.htmlを参考にすれば早かった。
[?v3.1.0]と入れたのはバージョン変更時のブラウザキャッシュ対策です。
ファイルを差し替える場合は、ここも変更した方が良いです。
ここまでのコミット内容
https://dev.azure.com/nightonly/_git/rails-app-origin/commit/5b7d25923136d5005e7534cbf4c58926a337ee8f
“RailsアプリにMaterial Design for Bootstrap 5を導入” に対して1件のコメントがあります。