Ruby on RailsでWebアプリを開発している際にSassとBootstrapの関係について気になったのでまとめてみました。
初めての技術記事なので至らないところもあると思いますが、読んでいただけますと幸いです！
1. Sassとは？
Sass（サス）は、CSSをより効率的に、短いコードで書くことができる言語です（拡張子は .scss）。
ブラウザはSassをそのまま理解できないため、最終的にCSSへ変換（コンパイル）して使用する必要があります。
Sassを使うメリット
Sassを導入すると、以下の機能によってコードの記述量を劇的に減らすことができます。
- 入れ子構造（ネスト）： HTMLの構造に合わせてCSSをネストして書けるため、親要素のクラスを何度も書く必要がなくなります。
- 変数（Variables）： ブランドカラーやフォントサイズ等何度も使いたいものを変数として定義し、使い回せます。変更時は変数の値を1箇所変えるだけで済みます。
- ミックスイン（Mixin）： よく使うスタイルの塊を@mixinでテンプレート化して、必要な場所で@includeを使うことで呼び出せます。
現代の主流は「Dart Sass」
SassをCSSに変換するエンジンにはいくつか種類がありますが、現在はDart Sassが主流（公式推奨）です。
Rails 8 では、アセットパイプラインの仕組みが下記のように変更されています。
- dartsass-rails gem がデフォルトで採用されています
- importmap-rails との併用も可能ですが、Bootstrap を使う場合は JavaScriptとCSSを同時に管理できるesbuild や webpack を使いましょう
💡 Dart Sassとは？
従来のRuby SassやLibSassはすでに廃止（非推奨）となっています。Dart Sassでは、新しいモジュールシステム（@useや@forward）が利用できるようになり、従来の@importよりも安全で管理しやすいコードが書けるようになっています。
@importは読み込んだすべての変数やmixinがグローバルで共有されるため名前の衝突が起きやすいという問題がありました。
@useや@forwardを使うと読み込んだ変数はグローバル化されず、カプセル化されるため、名前の衝突を避けることができます。
2. CSSフレームワーク（Bootstrap）との違い
「Sass」と「Bootstrap」は、そもそも役割が異なります。
- Sass： CSSを便利に書くための「言語（ツール）」
- Bootstrap： ボタンやナビゲーションバーなどの部品があらかじめ用意された「定義済みCSSの集合（フレームワーク）」
Bootstrapの中身はSassでできている
実は、Bootstrap（バージョン4以降）の内部コードはSassで書かれています。そのため、BootstrapにSassを導入すると、Bootstrapの元のデザインを上書きして自由自在にカスタマイズできるようになります。
3. Bootstrapを使うとき「Sass」は必要なの？
「どのようにBootstrapを導入するか」によって、Sassが必要かどうかが変わります。
| 導入方法 | Sass必要？ | 用途 |
|---|---|---|
| CDNリンク | ❌ 不要 | 手軽にデフォルトデザインを使いたい |
| コンパイル済みCSS | ❌ 不要 | デフォルトデザインをローカルで管理したい |
| npmインストール | ⭕ 必要 | カスタマイズや軽量化をしたい |
4. 【Rails環境】Bootstrap導入時のエラーと対策
最後にRails環境でBootstrapを導入した際に私が遭遇したエラーについて原因と対策をまとめました。
⚠️ エラー：インポート先が見つからない
Sassファイル内で以下のようにBootstrapを読み込んだ際、エラーが発生することがあります。
SCSS
// app/assets/stylesheets/application.scss
@import 'bootstrap/scss/bootstrap';
発生するエラーメッセージ：
Error: Can't find stylesheet to import.
@import 'bootstrap/scss/bootstrap';
💡 原因と解決策：Dart Sassにパスを通す
Railsの dartsass-rails ジェムは、デフォルト状態では node_modules フォルダの中身を見に行ってくれません。そのため、「Bootstrapなんて場所は知らないよ」とエラーになってしまいます。
ローカル環境（開発環境）では暗黙の了解で動いてしまうことがありますが、本番環境（RenderやHerokuなど）にデプロイした途端に動かなくなる原因にもなります。
これを解決するために、イニシャライザに設定を追加して明示的にパスを通しました！
設定ファイルの修正：config/initializers/dartsass.rb を作成（または編集）し、以下のコードを追加します。
# config/initializers/dartsass.rb
DartSass::Rails.configure do |config|
# dartsassにnode_modulesの中身を読み込ませる設定を追加
config.load_paths << Rails.root.join("node_modules")
end
設定後の確認方法
設定を追加したら、以下のコマンドでアセットを再ビルドしてください。
# Railsサーバーを再起動
bin/rails restart
# または、開発環境でアセットを手動ビルド
bin/rails assets:precompile
無事にBootstrapのSassファイルが読み込まれ、エラーが解消されました！
まとめ
- SassはCSSを効率的に書くための言語で、今の主流はDart Sass
- Bootstrapは便利なCSSの詰め合わせ。そのまま使うならSassは不要だけど、カスタマイズするならSassが必要
- RailsでBootstrapのSassを読み込むときは、
dartsass.rbでnode_modulesへのパスを通すのを忘れずに！
参考資料
まとめるにあたって下記の技術記事を参考にさせていただきました。
[Sass] Sassについて - Qiita
webデザイナーによるCSS（DartSass/BEM）学び直し - Qiita
Bootstrap 4を使うならSassを使って3倍幸せになろう - Qiita