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`で読み込みます。

```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`ファイルにプラグインとして読み込むための設定を記述します。

```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`ファイルを作成します。

```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`で読み込みます。

```js:application.js
import './bootstrap_custom.js'
```

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

```scss:application.scss
@import './bootstrap_custom.scss';
```

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

```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](https://medium.com/@guilhermepejon/how-to-install-bootstrap-4-3-in-a-rails-6-app-using-webpack-9eae7a6e2832)
- [Rails 6にjQueryとBootstrapを入れる] (https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a)
- [【Rails入門】Webpackerではじめるフロントエンド開発！Rails5.1対応] (https://www.sejuku.net/blog/68146)