Rails6でBootstrap4とFont-Awesomeの導入

rails6にする

rbenv exec gem install rails
rails -v
~~[log]
Rails 6.0.0
~~

新しくプロジェクト作成時に自動でwebpackerがインストールされる

rails new . -d postgresql
〜〜[log]
rails  webpacker:install
Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/
〜〜

yarnをインストールして手動でwebpackerをインストール

brew install yarn
rails  webpacker:install
~~[log]
✨  Done in 5.31s.
Webpacker successfully installed 🎉 🍰
~~[log]

ディレクトリ構成

app/javascript:
├── packs
│   └── application.js
└── src
    └── application.scss

Bootstrapの導入

yarn add bootstrap@4.3.1 jquery popper.js
mkdir app/javascript/src
touch app/javascript/src/application.scss
echo 'import "bootstrap"' >> app/javascript/packs/application.js
echo 'import "../src/application.scss"' >> app/javascript/packs/application.js
echo '@import "~bootstrap/scss/bootstrap";' >> app/javascript/src/application.scss
touch config/initializers/generators.rb
echo 'Rails.application.config.generators.assets false' >> config/initializers/generators.rb

Font-Awesomeの導入

yarn add @fortawesome/fontawesome-free
echo 'import "@fortawesome/fontawesome-free/js/all"' >> app/javascript/packs/application.js
echo '@import "~@fortawesome/fontawesome-free/scss/fontawesome";' >> app/javascript/src/application.scss