はじめに
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
今回は、みんな大好き Bootstrap を Bootstrap 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 を組み込みます。
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 します。
...
import "bootstrap"
import "../stylesheets/application"
app/javascript/stylesheets/application.scss はこのあと、作成します。
application.scss を作る
app/javascript/stylesheets/application.scss を作成します。
bootstrap を import します。
@import "~bootstrap/scss/bootstrap";
javascript のディレクトリに scss ファイルを置くのは、ちょっと微妙な気がしないでもないですが、scss(css) は、まだ、 app/assets ディレクトリにデフォルトで作られるので仕方ないのかと思ったり思わなかったり。
なんか、 app/javascript ディレクトリを app/webpack ディレクトリに名前を変更している記事も見かけました。
application.html.erb を編集する
application.html.erb に stylesheet_pack_tag を追加します。
...
<head>
...
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
...
Bootstrap を使ってみる
Bootstrap を使ってみます。 (Bootstrap が組み込めることを確認するだけですので、詳細は省略します。試したソースでは、 index のページ と入力フォームに最低限の Bootstrap を適用しています。)
リンクをボタンに変更するため、 scaffolds.scss の a タグの設定を削除しました。
/*以下の設定をまるっと削除する */
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
補足
ツールチップなど使う場合には、以下を追記しておく必要があるようです。
document.addEventListener("turbolinks:load") {
$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="popover"]').popover()
}