Ruby on Rails

Rails7にdartsass-railsを導入する

Rails7でdartsass-railsを導入するのサムネイル画像

awayuki

音大出身。学生時代はフリーランスでWEB制作しながら、2社でエンジニアインターンを経験しました。 23卒で、自社開発ベンチャー企業に入社しエンジニア・デザイナーとして働き、2024年2月、起業しました! このブログでは、ブログ開設方法・プログラミング・音大からエンジニアになれた方法など書いています。 お仕事依頼はお問い合わせフォームからお問い合わせお願いします。 Zenn

プロジェクトに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

  • この記事を書いた人

awayuki

音大出身。学生時代はフリーランスでWEB制作しながら、2社でエンジニアインターンを経験しました。 23卒で、自社開発ベンチャー企業に入社しエンジニア・デザイナーとして働き、2024年2月、起業しました! このブログでは、ブログ開設方法・プログラミング・音大からエンジニアになれた方法など書いています。 お仕事依頼はお問い合わせフォームからお問い合わせお願いします。 Zenn

-Ruby on Rails
-,