Help us understand the problem. What is going on with this article?

Rails6 のちょい足しな新機能を試す40(Webpacker Bootstrap編)

More than 1 year has passed since last update.

はじめに

Rails 6 に追加されそうな新機能を試す第40段。 今回は、 Webpacker Bootstrap 編です。
Rails 6 では、 Webpacker がデフォルトで導入されるようになります。

Ruby 2.6.3, Rails 6.0.0.rc1 で確認しました。Rails 6.0.0.rc1 は gem install rails --prerelease でインストールできます。

$ rails --version
Rails 6.0.0.rc1

今回は、みんな大好き BootstrapBootstrap Ruby Gem を使わずに導入してみたいと思います。
説明しているサイトによって、微妙にやり方が少しずつ違ったりします。この記事は参考程度にしてください。

Rails プロジェクトを作る

$ bin/rails new rails6_0_0rc1
$ cd rails6_0_0rc1

User の CRUD を作る

User の CRUD を作っておきます。

$ bin/rails g scaffold User name

db:migrate を実行する

$ bin/rails db:create db:migrate

yarn add で Bootstrap を追加する

Bootstrap jQuery Popper.js を yarn で追加します。

$ yarn add bootstrap jquery popper.js

config/webpack/environment.js を編集する

config/webpack/environment.js を編集して、 jQuery と Popper.js を組み込みます。

config/webpack/environment.js
const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

module.exports = environment

application.js を編集する

app/javascript/packs/application.js を編集して bootstrap を import します。

app/javascript/packs/application.js
...
import "bootstrap"
import "../stylesheets/application"

app/javascript/stylesheets/application.scss はこのあと、作成します。

application.scss を作る

app/javascript/stylesheets/application.scss を作成します。
bootstrap を import します。

app/javascript/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap";

javascript のディレクトリに scss ファイルを置くのは、ちょっと微妙な気がしないでもないですが、scss(css) は、まだ、 app/assets ディレクトリにデフォルトで作られるので仕方ないのかと思ったり思わなかったり。
なんか、 app/javascript ディレクトリを app/webpack ディレクトリに名前を変更している記事も見かけました。

application.html.erb を編集する

application.html.erb に stylesheet_pack_tag を追加します。

app/views/layouts/application.html.erb
...
  <head>
   ...
    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  ...

Bootstrap を使ってみる

Bootstrap を使ってみます。 (Bootstrap が組み込めることを確認するだけですので、詳細は省略します。試したソースでは、 index のページ と入力フォームに最低限の Bootstrap を適用しています。)

リンクをボタンに変更するため、 scaffolds.scssa タグの設定を削除しました。

app/assets/stylesheets/scaffolds.scss
/*以下の設定をまるっと削除する */
a {
  color: #000;

  &:visited {
    color: #666;
  }

  &:hover {
    color: #fff;
    background-color: #000;
  }
}

実行する

実行して確認すると以下の WARNING が出ますが、Bootstrap が適用されていることが確認できました。

...
[Webpacker] Compiling…
[Webpacker] Compilation failed:

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3
...

core-js を追加する

core-js が原因で、エラーが発生するという情報も見かけたのですが、手元ではエラーが再現できませんでした。
(エラーは fix されている?)

$ yarn add core-js@3

試したソース

試したソースは以下にあります。
https://github.com/suketa/rails6_0_0rc1/tree/try040_webpacker_bootstrap

補足

ツールチップなど使う場合には、以下を追記しておく必要があるようです。

app/javascript/packs/application.js
document.addEventListener("turbolinks:load") {
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
}

参考情報

suketa
Rails初心者なRubyコミッター
ruby-dev
Ruby開発はRuby on Railsをコア技術とし、Web系から基幹系まで多様な開発に携わっています。
https://www.ruby-dev.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした