🌊

Rails6.1 + WebpackerでMaterial Design Bootstrapを導入する

2021/10/08に公開

Rails

株式会社TECH LUCKという会社で代表兼エンジニアをしている齊藤です。

Ruby on RailsのWebpackerでJS, CSSを管理しながらMaterial Design Bootstrap（以下MDB）を導入する方法になります。

導入するMDBのドキュメントは以下のURLから参照ください。
https://mdbootstrap.com/

やること

WebpackerでCSSを管理するために、Webpackerのエントリーポイント（読み込みの最初の地点）となるapp/javascript/stylesheetsにapplication.scssを作成します。

bash

mkdir app/javascript/stylesheets
touch app/javascript/stylesheets/application.scss

application.html.erbの中を以下のように変更します。

application.html.erb

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

yarnでmdb-ui-kitパッケージを追加します。
※他の方の記事ではbootstrap-material-designパッケージを追加していたりますが、エラーなどが出てしまったためmdb-ui-kitをインストールしました。正直この2つライブラリの違いはわかっていません。

bash

yarn add mdb-ui-kit

先ほど作成したapp/javascript/stylesheets/application.scssに以下の記述を追加します。
これにより、yarnで導入したMDBのCSSをWebpackerに読み込ませることができます。

bash

@import "~mdb-ui-kit/src/scss/mdb.free";

app/javascript/stylesheets/application.jsの一番上の行に以下の記述を追加します。
※mdb.jsファイルはこの後作ります。

application.js

import * as mdb from 'mdb-ui-kit';
import './mdb'

app/javascript/packs/mdb.jsファイルを以下の内容で作成します。
このmdb.jsファイルは、画面が表示された際にMDBのformコンポーネントが正常に表示されないエラーが発生するエラーを解決することができます。

mdb.js

import * as mdb from "mdb-ui-kit/js/mdb.min.js"

// Function to refresh input element style when necessary
var mdbInputUpdate = function () {
  document.querySelectorAll('.form-outline').forEach((formOutline) => {
    new mdb.Input(formOutline).init();
  });
  document.querySelectorAll('.form-outline').forEach((formOutline) => {
    new mdb.Input(formOutline).update();
  });
}

document.addEventListener('turbolinks:load', () => {
  mdbInputUpdate();
});

document.addEventListener('turbolinks:render', () => {
  mdbInputUpdate();
});

これにて導入は完了です。

Rails6.1 + WebpackerでMaterial Design Bootstrapを導入する

やること

参考記事

Discussion