【Rails7】Sass と Bootstrap を導入するまでの奮闘

こんにちは。
子育て中の現役看護師で、エンジニア転職を目指して勉強しています。
今回、練習のためにRails 7 で Sass と Bootstrap を導入しようとした際に、多くのエラーに直面しました。
自分にとって手強かったので、それらのエラーとその解決方法をまとめます。

---

環境

• Ruby 3.2.2
• Rails 7.1.5
• Yarn 1.22.22
• Bootstrap 5.3.3

---

1️⃣ Sass と Bootstrap をインストール

まずは yarn を使って Bootstrap をインストール。

yarn add bootstrap

Sass も cssbundling-rails 経由でセットアップ。

bundle add cssbundling-rails
rails css:install:sass

この時点で、node_modules/bootstrap/scss/ に Bootstrap の SCSS ファイルが存在することを確認する。

ls node_modules/bootstrap/scss

Bootstrap の SCSS ファイルがない場合は、yarn add bootstrap を再度実行してみる。

---

2️⃣ application.scss に Bootstrap を読み込む

次に、app/assets/stylesheets/layouts/application.scss を作成し、以下の内容を記述。

@import "bootstrap/scss/bootstrap";
@import "navbar";

navbar.scss はナビゲーションバー用のスタイルとして app/assets/stylesheets/layouts/navbar.scss に置く。

.navbar {
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .0975);
    height: 77px;
    &__brand {
      height: 35px;
      width: 176px;
      background-size: 114px;
    }
}

---

3️⃣ config/application.rb に node_modules を追加

Rails に node_modules の SCSS を認識させるために、config/application.rb に以下を追加する。

module SnsApp1
  class Application < Rails::Application
    config.assets.paths << Rails.root.join("node_modules")
  end
end

---

4️⃣ Sass のビルド

以下のコマンドを実行して、Sass をコンパイルを行う。

yarn build:css

成功すれば、app/assets/builds/application.css が生成された。

---

5️⃣ アセットのプリコンパイル

rails assets:precompile

ここで layouts/application.css が見つからないエラーが出た場合は、app/assets/config/manifest.js に以下を追加。

//= link application.css
//= link layouts/application.css

その後、再度 rails assets:precompile を実行。

---

6️⃣ Rails サーバーを再起動して動作確認

rails server

ブラウザで http://localhost:3000 にアクセスし、CSS が適用されているか確認。

---

7️⃣ 手強かったエラーと対策（記録に残す）

① Error: File to import not found or unreadable: bootstrap/scss/bootstrap.

解決策:

1. node_modules/bootstrap/scss/ にファイルが存在するか確認

   ls node_modules/bootstrap/scss
   

2. 存在しない場合は、Bootstrap を再インストール

   yarn add bootstrap
   

3. @import のパスを修正

   @import "bootstrap/scss/bootstrap";
   

4. config/application.rb に node_modules を追加

   config.assets.paths << Rails.root.join("node_modules")
   

---

② Asset layouts/application.css was not declared to be precompiled in production.

解決策:

1. app/assets/config/manifest.js に以下を追加

   //= link layouts/application.css
   

2. rails assets:precompile を再実行

   rails assets:precompile
   

---

まとめ

Sass と Bootstrap の導入にはいくつかのトラブルがありました。
様々な記事を読み漁り、どうにかこうにか対処できました。

• yarn add bootstrap で Bootstrap をインストール
• @import "bootstrap/scss/bootstrap"; で SCSS を読み込む
• config/application.rb に node_modules を追加
• rails assets:precompile でアセットをプリコンパイル

この流れで Rails 7 に Bootstrap を適用できました。

---

初学者のため、間違えていたらすいません。
引き続き、学習を続けて行きます。