Qiitaの記事を参考にyarnでインストールしてみましたが、ボタンの背景が青になる筈の所が透過に。
また、最新の5ではなく4がインストールされたので、別の方法を試しました。
と言っても、単純にダウンロードしたCSSとJSを設置しただけですが。

ダウンロード

https://mdbootstrap.com/

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

修正コミット内容
https://dev.azure.com/nightonly/rails-app-origin/_git/rails-app-origin/commit/1d9150fc28e26f2ba6b19750852b738fc3a30243

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です