Rails6 Material Design for Bootstrapを使用する手順

Rails6 Material Design for Bootstrapを使用する手順

Rails6環境で標準となった、railsでWebpackが利用できるWebpackerを使用してMaterial Design for Bootstrapを導入するまでの手順を記述してます。

環境

  • OS windows10 pro 64bit
  • ruby 2.6.6
  • rails 6.0.3.2

※windows10にrubyをインストールして実行する手順はこちら
※windows10にRuby on Railsをインストールして利用する手順はこちら

bootstrapとbootstrap-material-designとjqueryとpopper.jsインストール

yarnを利用してインストールします。
※windows10にscoopを使ってnode.jsをインストールする手順はこちら

nodeがインストールされていればyarnは、下記を実行すればインストールされます。

railsプロジェクトを作成します。

対象のrailsのプロジェクト直下で下記のコマンドを実行します。

自分の場合は作成したプロジェクト名が「rails-test」 なのでrail-testファルダ配下で実行してます。

プロジェクト配下にあるpackage.jsonにbootstrapとjqueryが追加されていることが確認できます。

bootstrap-material-design設定

「app\javascript」ファルダ内にある「css」という名前でフォルダを作成します。

作成した「css」フォルダ内に「application.scss」を作成します。

「application.scss」を以下の内容で編集します。

次に、「app\javascript\packs」にあるwebpackのデフォルトのエントリーポイント「application.js」に下記を追加します。

jQuery設定

「config\webpack」ファルダ配下にあるローダーやプラグインの設定を行う「environment.js」に下記を追加します。

bootstrap-material-design使い方

bootstrap-material-designを適当なテンプレートに、適応してみます。

Webpackerのコンパイルに少し時間がかかりますが、bootstrap-material-designが使用できていることが確認できます。