[Rails]SassC::SyntaxError: Error: Invalid CSS after “…”: expected expression (e.g. 1px, bold), was “.png);”の解決方法

  • このエントリーをはてなブックマークに追加

スポンサーリンク

rails6の本番環境でプリコンパイルを実行した際に、表題のエラーが出たので解決方法をメモがてら残しておきます。

原因の特定

CSS周りなので、stylesheets配下のファイルを全部コメントアウトして、ローカルで成功するまでちょっとずつ有効にしていきました。

ちなみにローカルでプリコンパイルを実行するには以下のようになります。

$ RAILS_ENV=production rails assets:precompile

そんな感じで作業していくと背景画像を表示する箇所でエラーが起きてるようでした。

background-image: image-url('hoge.png');

みた感じ、おかしいようには見えないが・・・

結論、拡張子がCSSだった

hoge.cssのようにCSSファイルではimage-urlは使えないです。

image-urlやasset-pathはsass-railsというgemの機能です。

https://github.com/rails/sass-rails?tab=readme-ov-file#features

今回はCSSファイル内でimage-urlを使っていたのが原因でした。

なので、拡張子を.cssから.scssに変更することでプリコンパイルが成功しました。


ちなみに詳しくみてないけど、rails7だとcssbundlingあたりがいい感じにしてくれるらしい。

スポンサーリンク

  • このエントリーをはてなブックマークに追加