search
LoginSignup
180

More than 3 years have passed since last update.

posted at

RailsでBootstrapとFont-AwesomeはWebpackerで今時っぽく使おう

なにこれ

今時RailsではyarnによりJS/CSSのパッケージ管理が出来るようになっています。
そうなるとBootstrapとかFont-AwesomeをわざわざGem経由して使うのってイケてなくない?
しかもRailsにWebpackerというモダンにJS/CSSが使えるようになるツールがあるんだから、
それ使おうぜ、っていう記事です。

手順

各種バージョン情報

Ruby: 2.6.1
Rails: 5.2.2
Node.js: 10.14.1
yarn: 1.7.0
Webpacker: 3.5.5
Bootstrap: 4.3.1
Font-Awesome(Free): 5.7.2

サンプルについて

適当にrails newしてrootのビューだけを作ったアプリにBootstrapもFont-Awesomeを導入します。
今回は既存のRailsアプリがWebpackerを導入する場合を考慮して、rails new時に--webpackオプションはつけませんでした。

こちらがまだ何もJS/CSSを当てられていない状態の画面です。

RailsBootstrapTemplate.png

こいつにBootstrapとFont-AwesomeのJS/CSSを当てていきます。

Webpackerの導入

Gemfilewebpackerを追加して、インストールします。

Gemfile
gem 'webpacker', '~> 3.5'
$ bundle install

Webpackerをプロジェクトにインストールします。

$ bundle exec rails webpacker:install

これでWebpackerを実行するための各種ファイルが生成されます。

それと、app以下にjavascriptディレクトリが生成されますが、
基本的にここにWebpackerでビルドするJS/CSSを配置するようにします。
今はまだCSSを配置するためのディレクトリがないので、app/javascript以下にsrcというディレクトリを作成します。

$ mkdir app/javascript/src

その中にapplication.scssを作成しておきましょう。

$ touch app/javascript/src/application.scss

Bootstrapの導入

yarnコマンドでBoostrapのライブラリを取得します。
今回は4.3.1を指定していますが、Bootstrap4系のJSはjQueryとpopper.jsに依存しているので、それらも同時に取得します。

$ yarn add bootstrap@4.3.1 jquery popper.js

次にBootstrapのJSをapp/javascript/packs/application.jsで、
CSSをapp/javascript/src/application.scssでインポートします。
なお、Webpackerはビルドの際app/javascript/packsの中だけを参照するので、
application.scssがビルドされるようにapplication.jsでインポートしておきます。

app/javascript/packs/application.js
import 'bootstrap'
import '../src/application.scss'
app/javascript/src/application.scss
@import '~bootstrap/scss/bootstrap';

今度はアプリケーションがWebpackerでビルドしたJS/CSSを読み込むよう設定する必要があります。
app/views/layouts/application.html.erbに以下の2文を追加しましょう。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>RailsBootstrapTemplate</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

+    <%= javascript_pack_tag 'application' %>
+    <%= stylesheet_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Bootstrapだけの導入でいいなら、これで完了です。

Font-Awesomeの導入

yarnコマンドでFont-Awesomeを取得します。

$ yarn add @fortawesome/fontawesome-free

yarn add font-awesomeとすると古い4系が入るので注意。

こちらもJS/CSSをインポートします。

app/javascript/packs/application.js
import 'bootstrap'
+ import '@fortawesome/fontawesome-free/js/all'
import '../src/application.scss'
app/javascripts/src/application.scss
@import '~bootstrap/scss/bootstrap';
+ @import '~@fortawesome/fontawesome-free/scss/fontawesome';

起動する

ここまでの設定が完了していれば、あとはいつもので開発環境でアプリを起動しましょう。

$ rails s

ブラウザでページを表示しようとすると、Webpackerが自動でJS/CSSをビルドして、
public/packs以下にビルドしたJS/CSSが生成されてページで読み込まれます。

bin/webpackコマンドでビルドすることもできます。

$ bin/webpack

bin/webpack-dev-serverを使えばファイルに変更があった場合、
それを検知して自動でビルドしてくたりもします。

$ bin/webpack-dev-server

うまくできていれば、こんな感じでBootstrapとFont-AwesomeのJS/CSSが適用されます。

Image from Gyazo

サンプルコード
app/views/home/index.html.erb
<div class="container">
  <div class="jumbotron m-3">
    <h1 class="display-4">Hello, Bootstrap!</h1>
    <hr class="my-4">
    <p>This is the template of Ruby on Rails using Bootstrap.</p>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#exampleModal">
      <i class="far fa-window-maximize"></i>
      Click here
    </button>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Hello!
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

サンプルのリポジトリ

おわり

これであなたもRailsのフロントで幸せになれるかもしれない。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
180