Rails6アプリでBootstrapを導入する方法

概要

Rails6以降、デフォルトでWebpackerが 導入されています。WebpackerとはRailsで簡単にWebpackを利用できるようにしたgemパッケージです。Java Scriptなどを用いたモダンなフロントエンド開発環境に対応するために、Asset Pipelineに替わるモジュールバンドラーとして導入されています。
今回はWebpackerが導入されたRails6でBootstrapを使うための設定をまとめました。

環境:
Rails6.0.2
Bootstrap4.3

新しいマニフェストファイル作成

まず、app/javascript以下にstylesheetsフォルダを作成し、application.scssファイルを作成します。
そのファイルをjavascript/packs/application.jsで読み込みます。

application.js

import '../stylesheets/application'

webpackを使用するために/views/layouts/application.html.slimファイルを編集します。

application.html.slim

~~省略
   = stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'  #link→packへ
   = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
~~省略

これでWebpackerがページ更新時に変更ファイルをコンパイルしてくれます。

必要なものをインストール

依存性のあるjquery, popper.jsもインストール

$ yarn add bootstrap@4.3.1 jquery popper.js

config/webpack/environment.jsファイルにプラグインとして読み込むための設定を記述します。

environment.js

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

js,cssファイルの編集

jsファイル編集

app/javascript/packsフォルダにbootstrap_custom.jsファイルを作成します。

bootstrap_custom.js

import 'bootstrap/js/dist/alert'
import 'bootstrap/js/dist/button'
import 'bootstrap/js/dist/carousel'
import 'bootstrap/js/dist/collapse'
import 'bootstrap/js/dist/dropdown'
import 'bootstrap/js/dist/index'
import 'bootstrap/js/dist/modal'
import 'bootstrap/js/dist/popover'
import 'bootstrap/js/dist/scrollspy'
import 'bootstrap/js/dist/tab'
import 'bootstrap/js/dist/toast'
import 'bootstrap/js/dist/tooltip'
import 'bootstrap/js/dist/util'

このファイルをapp/javascript/packs/application.jsで読み込みます。

application.js

import './bootstrap_custom.js'

cssファイルの編集

同様にcssファイルを編集します。

application.scss

@import './bootstrap_custom.scss';

bootstrap_custom.scssファイルを作成、編集

bootstrap_custom.scss

@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/_mixins.scss';
@import '~bootstrap/scss/_root.scss';
@import '~bootstrap/scss/_reboot.scss';
@import '~bootstrap/scss/_type.scss';
@import '~bootstrap/scss/_alert.scss';
@import '~bootstrap/scss/_badge';
@import '~bootstrap/scss/_breadcrumb';
@import '~bootstrap/scss/_button-group';
@import '~bootstrap/scss/_buttons';
@import '~bootstrap/scss/_buttons.scss';
@import '~bootstrap/scss/_card.scss';
@import '~bootstrap/scss/_carousel.scss';
@import '~bootstrap/scss/_close.scss';
@import '~bootstrap/scss/_code.scss';
@import '~bootstrap/scss/_custom-forms.scss';
@import '~bootstrap/scss/_dropdown.scss';
@import '~bootstrap/scss/_forms.scss';
@import '~bootstrap/scss/_grid.scss';
@import '~bootstrap/scss/_images.scss';
@import '~bootstrap/scss/_input-group.scss';
@import '~bootstrap/scss/_jumbotron.scss';
@import '~bootstrap/scss/_list-group.scss';
@import '~bootstrap/scss/_media.scss';
@import '~bootstrap/scss/_modal.scss';
@import '~bootstrap/scss/_nav.scss';
@import '~bootstrap/scss/_navbar.scss';
@import '~bootstrap/scss/_pagination.scss';
@import '~bootstrap/scss/_popover.scss';
@import '~bootstrap/scss/_print.scss';
@import '~bootstrap/scss/_progress.scss';
@import '~bootstrap/scss/_spinners.scss';
@import '~bootstrap/scss/_tables.scss';
@import '~bootstrap/scss/_toasts.scss';
@import '~bootstrap/scss/_tooltip.scss';
@import '~bootstrap/scss/_transitions.scss';
@import '~bootstrap/scss/_utilities.scss';

これでBootstrapが使用できるようになるはずです。

参考

• How to install bootstrap 4.3 on a Rails 6 app using Webpack
• Rails 6にjQueryとBootstrapを入れる
• 【Rails入門】Webpackerではじめるフロントエンド開発！Rails5.1対応