【Rails7】Bootstrapのカスタム用CSSを作成して適用する

Rails7でBootstrap5のカスタム用スタイルシート(custom.scss)を作成して適用する方法をまとめたメモです。

開発環境

• Ruby 3.1.2
• Ruby on Rails 7.0.3
• Bootstrap 5.1.3
• M1 Macbook Air 2020
• mac OS Monterey (ver. 12.4)
• ターミナル bash (Rosetta 2 使用)

Rails7 で Bootstrap5 を使えるようにする

以下のコマンドでアプリを新規作成します。

$ rails new アプリ名 --css bootstrap

上記の-css bootstrapオプションを指定することで、Bootstrapが使えるようセッティングしてくれます。

また、app/assets/stylesheetsディレクトリにBootstrap用のスタイルシートapplication.bootstrap.scssが生成されます。

実は、このapplication.bootstrap.scssにそのままCSSを書き込めばスタイルのカスタムを行うことができるんですが、カスタム専用のCSSファイルを用意したい場合はもう一手間必要になります。

custom.scss を作成し、スタイルシートを適用させる

カスタム用CSSを作成して適用させる流れは以下の通りです。

custom.scss を新規作成

app/assets/stylesheetsにカスタム用CSSファイルcustom.scssを新規作成します。

ファイル名はなんでもOKですか、今回はカスタム用だと分かりやすいようにcustom.scssとしています。

application.bootstrap.scss に custom.scssを読み込む

app/assets/stylesheets/application.bootstrap.scssにcustom.scssを読み込むよう以下のように記述します。

@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';
@import 'custom'; /* 追記 */

custom.scssでは親スタイルに上書きをするため、親のcssが読み込まれた後にcustomを読み込むようにします。

bin/devでCSSをビルド（コンパイル）する

Rails7ではrails sコマンドでサーバを起動してもJSやCSSがビルド（コンパイル）されません。

その代わりに、bin/devコマンドで起動するとJSやCSSがビルドされ、BootstrapのJSやCSSを変更したときに自動的に再ビルドされます。

基本的に、Rails7でBootstrapを使用する場合、サーバーの起動はbin/devで行うといいでしょう。

以上です。