20
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Rails 7 で CSS が反映されなかった話

Posted at

かなり初歩的なところでつまづいて何時間も無駄に費やした記録

Ruby 3.1.1 + Rails 7.0.2.3

何が起こった?

初めて Ruby on Rails 7 で簡単なウェブアプリを作ろうとしていた。

スタイルシートは,空の状態から始め,app/assets/stylesheets/application.sass.scss に少しだけ記述を行なった。

しかし反映されなかった。

やったこと

この節は,実際にやったことをかなり単純化して記述している。

前半

Sass を使う前提で

rails new hoge -c sass

として Rails アプリを作り,いくつかのモデルとコントローラーを書いた。
スタイルは一切書かずに動作確認などを行なった。
開発中は

bin/dev

でサーバーを起動していた。

ここで,「production 環境での動作がどうなるか」と思い,

rails s -e production

でサーバーを起動し直し,ブラウザーで表示させたところ,エラーが出た。
log/production.log には

ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.

と出ていた。
あ,そうか,production 環境ではプリコンパイルした CSS を用意しないといけないのだった。

そこで,

rails assets:precompile RAILS_ENV=produciton

とすると,public の下に assets ディレクトリーが出来て,いくつかのファイルができた。
もちろんその中に application-なんちゃらかんちゃら.css もある。中身は空(まだスタイルを一切書いてないので当たり前)。

これでエラーは出なくなった。

後半

さて,ここから開発を再開。
モデル,コントローラーなどを作り進め,「そろそろスタイルも書いていくか」と思ったものの,Rails 7 における CSS のルールがよく分からない。

とりあえず app/assets/stylesheets/application.sass.scss

body {
  background: yellow;
}

のような簡単な記述を行なってどうなるか調べた。
反映されない。背景が黄色くならない。
うーむ,やはり Rails 7 の CSS についての基本的な知識が欠けているようだ。

ここから,さまざまな実験を行なったりウェブ検索したり,
cssbundling-rails gem の説明(英語)を頑張って読んでみたりもしたが,よく分からない。

確実に分かって安心できた点は,

bin/dev

を起動している間は

yarn build:css --watch

が効いているので,application.sass.scss に書いた内容が即座に app/assets/builds/application.css に反映される,ということであった。
builds 下に反映されるということは,〈そこそこうまくいっている〉はず。cssbundling-rails の説明でも,出来たファイルが builds 下に置かれる,と書いてあった。
問題は,なぜ builds 下のスタイルシートがブラウザーで読み込まれないか,だ。

そこで,見ている画面の HTML を開き,<link rel="stylesheet" ... を見つけ,href 属性を確認し,そのパスを直接ブラウザーで開いた。
そいつは空っぽであった。

手詰まり感で陰鬱な気持ちになった。
今まで sprockets が裏で何をやってくれていたかとか意識したことがなかった。Rails 7 の新しいアセット管理の仕組みの理解も浅い。
うーん。

ここまでで数時間,いや十時間くらい溶かしただろうか。

解決

ふと,public ディレクトリーの下に assets が出来ていることを思い出した。
こいつを消してみたらどうなるのか。
assets をディレクトリーごと削除して,

bin/dev

をいったん落として再起動してみたところ,記述したスタイルが反映された。
この状態で app/assets/builds/application.css の記述を変更し,ブラウザーで画面をリロードしてみると,即座に反映された。

なんのことはない,development 環境であっても public/assets にスタイルシートがあればそれが読み込まれるというだけのことであったらしい。
まだ完全に理解できたわけではないが,だいたい分かった。いちおうこれで解決。

Rails のアセット管理が分かっている人にすれば「あたりまえやん」なのかもしれないが,Rails 7 という未知の世界に足を踏み入れ,大いに迷ったのであった。

あとがき

これ,Rails 7 未満でも同じなんですかね?

development 環境はローカルだけで使い,production 環境は本番サーバーだけで使う,というのが普通だと思うが,たとえば自分だけが(自分の特定のマシン上だけで)使う住所録を Rails で作ったとき,同じ場所で development でも production でも使うっていうことはあると思うんだけど,そういう場合はどうすればいいのだろう?

20
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?