Ruby on Rails

Rails7にdartsass-railsを導入する

本サイトの記事内にアフィリエイト広告が含まれる場合があります。

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

awayuki

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

-Ruby on Rails
-,