💨

Rails｜各ビューのCSSファイルの作成手順

2023/08/24に公開

各ビューのCSSファイルの作成手順をメモしておきます。

前提

application.html.erbの <head> に以下を記述済み。

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

上記の通り、application.html.erbの <head>に以下を記述していた。（Bootstrapの導入時に以下の通りに記述したため。）

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

そのため、app/assets/stylesheet内にcssファイルを作成しても反映されなかった。

→ app/javascript/stylesheet内にcssファイルを作成し、app/javascript/packs/application.jsで読み込み設定を記述することで解決。

app/javascript/stylesheetフォルダ内に、任意のフォルダやcssファイルを作成
例として、homes/top.cssを作成する。

app/javascript/packs/application.jsに以下のように記述し、読み込ませる。

import '../stylesheets/admin/homes/top.css';

これで完了！作成したcssファイルに書き込むことで、cssが反映されました！