概要
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
で読み込みます。
import '../stylesheets/application'
webpackを使用するために/views/layouts/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
ファイルにプラグインとして読み込むための設定を記述します。
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
ファイルを作成します。
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
で読み込みます。
import './bootstrap_custom.js'
cssファイルの編集
同様にcssファイルを編集します。
@import './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を入れる] (https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a)
- [【Rails入門】Webpackerではじめるフロントエンド開発!Rails5.1対応] (https://www.sejuku.net/blog/68146)