Rails7でassetsのstylesheetに個別のCSSファイルを追加する方法

Railsでアプリケーションを作って、

そのアプリケーションを作っていく中で、

レイアウトのデザイン部分は、

CSSフレームワークを使って、

楽をしたいと考えて、

環境を構築することがあります。

そんな中で、

• アプリケーションFWとしてRails
• CSSフレームワークとしてBootstrap

という構成で、

プロジェクトの作成から、

実際にBootstrapを導入することを行っていました。

そんな中で、

個別のCSSファイルを追加して、

実際に反映させる部分について、

メモを残しておきます。

Rubyのバージョン

まずは、

試した時のRubyのバージョンですが、

コマンドで確認します。

ruby -v

のコマンドを実行して確認すると、

$ ruby -v
ruby 3.0.4p208 (2022-04-12 revision 3fa771dded) [arm64-darwin21]

このバージョンであることが確認できました。

Railsのバージョン

Railsに関しては、

プロジェクト導入時に最新を取得したので、

その結果としてのRailsのバージョンですが、

コマンドで確認します。

rails -v

のコマンドを実行して確認すると、

$ rails -v
Rails 7.0.4.2

このバージョンで作成されていました。

Rails7でassetsのstylesheetに個別のCSSファイルを追加する方法

先ほどのバージョンにも関わりますが、

Railsのバージョン７で試しています。

個別のSCSSファイルを作成

ファイルは、

app/assets/stylesheets

のフォルダに、

例として、

sample.scss

というファイルを作ります。

中身は、

body {
  background: yellow;
}

など、

必要なCSSの記載を、

ご自身の環境に合わせて設定してください。

application.bootstrap.scssの調整

先程の作成したファイルを、

app/assets/stylesheets

のフォルダ内の

application.bootstrap.scss

というファイルに設定を追加します。

コードとしては、

@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';

@import 'sample';

のように、

設定を変更してください。

こちらを調整したら、

以下のアセットの再コンパイルを行なってください。

アセットの再コンパイル

Railsでのアセット自体は、

バージョンにもよりますが、

自分が試していたバージョンでは、

• アセットファイルとしてコンパイルして作成される
• コンパイルされたファイルを参照する

となっています。

この参照するためのコンパイルされたファイルを、

先程のCSS周りで変更を行ったら、

再コンパイルする必要があります。

再度、

Railsのコマンドを使って、

再コンパイルしてあげます。

コマンドは、

rails assets:precompile

で再コンパイルできます。

表示確認

こちらを実行した上で、

rails s

を実行すると、

問題なくレイアウトが表示されました。