プロジェクトに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ファイルが出力されているはずです。
このファイルを読み込めばスタイルを実装することができますね、、！