Rails 7 で複数の CSS のエントリーポイントを使う方法（管理画面は本体とは別の CSS を使いたいときなど）

対象

npm パッケージの sass を使っている

rails new 時に --css オプションで bootstrap や bulma, sass を指定した場合は npm パッケージの sass がインストールされています。

結論

sass の Many-to-many Mode を使います。

具体的には package.json のスクリプトのうち、 sass で scss ファイルをコンパイルするコマンドの引数を変更します。

例 application.bootstrap.scss とは別に admin.scss を使いたい場合

./app/assets/stylesheets/admin.scss:./app/assets/builds/admin.css を追記します。

package.json

{
  "scripts": {
-   "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
+   "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css ./app/assets/stylesheets/admin.scss:./app/assets/builds/admin.css --no-source-map --load-path=node_modules"
  }
}

これで
app/assets/stylesheets/admin.scss が app/assets/builds/admin.css としてコンパイルされ
ビューで <%= stylesheet_link_tag "admin", "data-turbo-track": "reload" %> が使えるようになります。

関連リンク