railsでDartSassを利用する際にかなり詰まったので、理解を進めるためにDartSassについてわかる範囲でまとめてみました。
そんな深いところまでまとめられていないと思いますが、ご容赦ください...
DartSassとは
DartSassとは現在最新のSassのコンパイラです。
Sassについても簡単に説明すると、cssを拡張し様々な機能が使えるようになったもので、実行時にはcssにコンパイルされる必要があります。
Sassファイルを実際にcssファイルにコンパイルしてくれるのがDartSassというわけです。
Rails7におけるSass環境の変遷
RailsでSassを使用できるようにするにはGemの導入が必要なのですが、これまではsassc-railsというLibSassを用いたGemが主流でした。
しかしLibSassはDartSassの１世代前のレガシーなコンパイラであり、現在のRails7では非推奨となっています。
代わりにRailsに推奨されているのがDartSassを用いたdartsass-railsというGemです。
dartsass-railsの利用方法
Gemfileに以下の記述を行い、bundle installします。
gem 'dartsass-rails'
これでDartSassがRailsで使用可能となりました。
基本的にはapp/assets/stylesheets/application.scssにSassを記述していくことになります。
application.scss以外のSassファイルをビルドに含めたい場合は、dartsass.rbファイルへの記入が必要になります。
例えば、app/assets/stylesheets/other/temp.scssをビルドしたい場合、dartsass.rbファイルに以下のように記述します。
Rails.application.config.dartsass.builds = {
"other/temp.scss" => "other/temp.css"
}
Rails.application.config.dartsass.buildsは、Sassのビルド元と、ビルド後のcssの配置先を設定するものです。
上の設定により、app/assets/stylesheets/other/temp.scssが、app/assets/builds/other/temp.cssとしてコンパイルされます。
そしてビューファイルで以下のように記載してあげることで、app/assets/builds/other/temp.cssがアセットパイプラインに乗り、フィンガープリント付きのcssファイルとして読み込まれます。
<html>
<head>
<%= stylesheet_link_tag "other/temp" %>
</head>
</html>
またdartsassは@import文に対応しており、複数のscssファイルをまとめることができます。
@importできるパスは通常だとapp/assets/stylesheets配下のファイルですが、こちらもdartsass.rbに設定してあげることでパスを追加することができます。
例えば、app/assets/stylesheets/otherを@importの対象に含めるには以下のように設定します。
Rails.application.config.dartsass.load_paths = [
"app/assets/stylesheets/other"
]
DartSassを用いたSassファイル読み込みの流れ
ここで、簡単ですがDartSassがSassファイルをコンパイルしてから、実際のビューで読み込まれるまでの流れを説明したいと思います。
- dartsass.rbの記述通りにSassファイルがまとめられ、ビルド先にcssファイルが出力される。
- アセットパイプラインによってcssファイルがプリコンパイルされる。
- プリコンパイルされたcssファイルがビューに読み込まれる。
重要なのはアセットパイプラインによって読み込まれるのはdartsassによってコンパイルされたcssファイルだということです。
そのため、ビューの読み込みでcssではなく、scssを指定しようとするとエラーとなります。
LoadError: cannot load such file -- sassc
その際によく出るエラーが、LoadError: cannot load such file -- sasscというエラーです。
このエラーはSassをアセットパイプラインがビルドしようとして失敗したエラーで、sassc-railsが必要だからインストールするように促しています。
googleでこのエラーを検索すると、sassc-railsをインストールすればいいという記事が数件ヒットしますが、この方法は正直好ましくないと思われます。
そもそもsassc-railsの代替としてdartsass-railsを使っているため、両方混在することは好ましくないということです。
処理の内容が完全に被っているため、インストールした場合今後予期せぬバグの原因となる可能性があります。
正常にcssにコンパイルされていればそもそもこのエラーは出ないため、正しいディレクトリにコンパイルされたcssが存在しているかを確かめるのが大切です。
最後に
以上が、私がわかる範囲のDartSassの仕様になります。
@importは現在非推奨であり、@useを使うべきだという点や、そのほかにもまだまだ調べきれていない点が多いので理解が進んだら再びSass関連の記事を書こうと思います。