Rails6でBootstrapとFontAwesomeをwebpack経由で使う

BootstrapとFontAwesomeのwebpackでの導入方法

Rails6からはwebpackが標準で搭載され、javascriptとstylesheetのファイルの位置も変わっており、意外に苦戦したので記載。

まずはターミナルからyarnでインストール

$ yarn add bootstrap@4.3.1 jquery popper.js

$ yarn add @fortawesome/fontawesome-free

下記のコードを追記

私はjavascriptディレクトリの下にsrcディレクトリを配置しているので注意。

app/javascript/src/application.scss

@import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";

app/javascript/packs/application.js

import "bootstrap";
import "@fortawesome/fontawesome-free/js/all"

config/webpack/environment.js

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

app/views/layouts/application.html.erb

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
//↑↑削除

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

コピペ可能です。