【Rails】 SassC::SyntaxError について

概要

この記事では、EC2にRailsアプリケーションをデプロイするときに直面した CSS 関連のエラーについて追及しています。

環境

• Ruby: 3.1.2
• Rails: 6.1.4
• CSSFW: TailwindCSS

エラー文

下記がデプロイ時に起きたエラーです。

Terminal

SassC::SyntaxError: Error: Function rgb is missing argument $green.
        on line 607 of stdin
>>   color: rgb(239 68 68 / var(--tw-text-opacity));

解決方法

production.rbのファイルの末尾に下記の記述を追加します。

config/environments/production.rb

+ config.assets.css_compressor = nil

原因

SassC::SyntaxError が起きてしまう原因としては、TailwindCSSが使用するCSS構文と、Rails6においてデフォルトで含まれる sassc-rails 拡張の間の非互換性に起因しているようです。この問題は、sassc-railsがTailwindCSSによって使用されるような現代的なCSS機能を認識しないために発生しているので、scssを使っていない場合はconfig.assets.css_compressor = nilをconfigに記述して解決するのが一番スタンダードみたいです。

Point
scssとSassの関連について記述しておきます。
scssファイルはSassプリプロセッサによって通常のCSSファイルに変換されます。このプロセスでは、scssファイル内のSass特有の構文や機能（変数、ネスト、ミックスインなど）が標準のCSSコードに変換されます。

さいごに

この問題は、Herokuを含む他のプラットフォームでRailsアプリケーションをデプロイする際にも遭遇する可能性があります。そのため、Railsで、TailwindCSSを使用する場合は、このような問題に遭遇する可能性があることを念頭に置くことが重要だと思っています。さらに、TailwindCSSのバージョンやRailsのアセットパイプラインの設定によってもエラーの原因や対処法が異なる可能性があるため、状況に応じた対応が必要になります。個人的にはissueを見るのが一番良いと思っています。

参考文献