Rails7構築 -その2#- cssをbootstrap指定(FontAwesomeまで)

### ↓その１のRails newからの続きです。
https://qiita.com/devzooiiooz/items/5f12c0601acd2ae9b5d9

その１はデフォルト(javascriptアプローチにimportmaps、アセットパイプラインはsprocketsを使用）で構築する方法ですが、ここではcssプロセッサでbootstrapを指定する方法を説明します。

##### 参考：こっちはimportmapsを使用する場合
https://qiita.com/devzooiiooz/items/4e8514622fd0661048c1

# Rails newにcssオプションでbootstrapを指定
これによりjavascriptアプローチがesbuildに固定され(-j esbuildと同じ）、importmapは使用できなくなる。アセットパイプラインはデフォルトのsprocketsになるようです。
```sh:
$ rails new . -c bootstrap -d mysql
```
# 動作確認用のページを作成
```sh:
$ rails g controller hello index
```
作成されたapp/views/hello/index.html.erbを以下のように書き換えます。
```erb:app/views/hello/index.html.erb
<div class="container">
  <h1>Hello#index</h1>
  <p>Find me in app/views/hello/index.html.erb</p>
  <div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Action
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
    </ul>
  </div>
  <div>
    <h5>
      Fontawesome Icon
    </h5>
    <div style="font-size: 5rem; color: cornflowerblue;">
      <i class="fas fa-space-shuttle"></i>
      <i class="fas fa-snowman"></i>
      <i class="fas fa-kiwi-bird"></i>
    </div>
  <div>
  <div>
    <h5>
      Bootstrap Icons
    </h5>
    <div style="font-size: 5rem; color: orange;">
      <i class="bi bi-boxes"></i>
      <i class="bi bi-radioactive"></i>
      <i class="bi bi-alarm"></i>
    </div>
  </div>
</div>
```
### rails sで体裁を確認
http://localhost:3000/hello/index
にアクセスしてみましょう。
![スクリーンショット 2023-01-12 9.58.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/9de654fb-7d55-45bd-3106-aa1e8a39a048.png)


おおっ！のっけからBootstrapのActionボタンとBootstrap Icons（オレンジ色のキューブとRadioactiveと目覚まし時計のアイコン）が有効になってます。
当然ですがFont Awesome Iconsは表示されません。
また、この段階ではActionのボタンのドロップダウンは無効になっています。
以下application.bootstrap.scssが自動で生成されました。

```scss:app/assets/stylesheets/application.bootstrap.scss
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';
```

ここで魔法のコマンドbin/devの登場です。
```sh:
$ bin/dev
```
これをやるだけでjavascriptコンパイラであるesbuildなどが走り、bootstrapのドロップダウンが有効になります。
![スクリーンショット 2023-01-11 20.30.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/ea93b998-6a11-230d-e296-dce2010b6dea.png)

### FontAwesomeのセットアップ
Fontawesomeのインストールは色々ありますが、
今回はyarnを使用します。

```sh:
$ yarn add @fortawesome/fontawesome-free
```
app/javascript/application.jsに以下を追加します。

```js:app/javascript/application.js
import '@fortawesome/fontawesome-free'
```
で、再度魔法のコマンドbin/devでコンパイルするとFontAwesomeが有効になるはずだ！
```sh:
$ bin/dev
```
???あれ？
![スクリーンショット 2023-01-12 9.58.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/9de654fb-7d55-45bd-3106-aa1e8a39a048.png)

これだけだと、FontAwesomeは有効になりません。
FontAwesomeのSVGが必要みたい。
```sh:
$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons
```
更にapp/javascript/application.jsに以下を追加します。
```js:app/javascript/application.js
import '@fortawesome/fontawesome-free'
// 追加部分
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { library } from "@fortawesome/fontawesome-svg-core";
library.add(fas, far, fab)
```
満を持してbin/dev
```sh:
$ bin/dev
```
![スクリーンショット 2023-01-12 10.17.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/687b8a73-c9e1-d83e-3b20-a101af458a5a.png)

FontAwesomeのアイコンが有効になりました。