Rails7にdartsass-railsを導入する

プロジェクトにSCSSを導入したいってなった時にgemの選定を行った。

dartsass-railsは@useなどに対応できたり、レガシーなsassc-rails gemの代わりで、公式サイトで推奨されているためこのgemを選択しました。

開発環境

• CPU: Mac M1
• Rails 7

インストール方法

下記コマンドを実行する

./bin/bundle add dartsass-rails
./bin/rails dartsass:install

サーバー起動

Dart Sassのウォッチプロセスと開発モードのrailsサーバの両方を起動するには下記コマンドを叩く。

サーバが起動してかつ自動でscssのコンパイルも行ってくれる

./bin/dev

下記のようなエラーが出た場合はsassc-railsとの依存関係があるgemを導入している可能性が高いので、依存関係があるgemは消すか、sassc-railsに切り替えるかのどちらかにした方が良いですね。

cannot load such file --sassc

詳しい設定方法

何も設定しなければ、app/assets/stylesheets/application.scssのみのコンパイルとなるので、他のファイルをコンパイルしたい場合は、少し記述する必要がありました。

config/initializers/dartsass.rb ファイルを作成します。
下記のコードのように、左側にコンパイルさせたいファイル、右側に出力するファイル名を記入します。

scssファイルはapp/assetsの中で監視されるようです。

Rails.application.config.dartsass.builds = {
  "app/index.scss"  => "app.css",
  "site.scss"       => "site.css"
}

設定をしてサーバーを再度立ち上げると、app/assets/builds にcssファイルが出力されているはずです。

このファイルを読み込めばスタイルを実装することができますね、、！

参考URL

https://github.com/rails/dartsass-rails