Rails 7 に Sass （DartSass）を導入する
Sass は開発になにかと便利なので、導入しました。
Rails 7 では、DartSass が推奨になっているので、これを使用しています。
以下に詳しい説明があったので、参考にさせていただきました。
また、DartSass についての詳しい内容は以下を参考にしました。
概要
対象
- Rails 7 の環境に Sass を新たに導入したい方
目的
- 新規プロジェクトに新たに DartSass を導入する
- Sass で開発をしやすくする
前提
- CPU：Mac M1
- Rails 7
- Docker 上で起動
- DartSass
手順
DartSass の導入
まずは、ターミナルを開き以下 2 つのコマンドを叩き、DartSass を導入していきます。
$ ./bin/bundle add dartsass-rails
$ ./bin/rails dartsass:install
ここで作成されたapplication.scssに CSS を記入していきます。
// Sassy
.test {
color: blue;
}
そしてこれを適用します。
<div class="test">Hello World!</div>
Sass は普通にサーバーを起動すると毎回ビルドをしないとスタイルが適用されません。
それはすごく不便なので、ここで、上記コマンドにより自動で生成されたProcfile.devというファイルを使用します。
以下のようになっていると思います。
web: bin/rails server -p 3000
css: bin/rails dartsass:watch
web はポート 3000 番でサーバーを起動して、CSS では DartSass を常に Watch するコマンドが書かれています。
さらにbin/devというファイルを見ると以下のようになっています。
#!/usr/bin/env sh
if ! gem list foreman -i --silent; then
echo "Installing foreman..."
gem install foreman
fi
exec foreman start -f Procfile.dev "$@"
ここでは、foremanという Gem を起動するようにしています。
foreman は記載したプロセスを一気に立ち上げることができ、ここでは Procfile.dev に書いたプロセスを立ち上げにいきます。
なので、これまで
bin/rails serverコマンドなどで立ち上げていたサーバーを、
./bin/devコマンドを使用して立ち上げることで、Procfile.dev に書かれているようにサーバー起動と同時に DartSass も Watch してくれるようになります。
起動するとスタイルが適用されていました ↓↓
以上でプロジェクト全体への Sass の適用はこれでできるようになりました。
次はディレクトリ毎に別途 Sass が適用できるようにしていきます。
Sass の個別適用
今回は Views にtopディレクトリと、usersディレクトリを作成し、それぞれにindex.html.erbファイルを作成します。
そしてそれぞれに別の CSS が適用されるようにしたいと思います。
まずは適用されているかがわかるように以下を作成します。
<h1>トップ！</h1>
<h1>ユーザーズ！</h1>
上記それぞれに CSS を適用するため、以下の通り Sass ファイルも作成します。
h1{
color: red;
}
h1{
color: green;
}
ここで DartSass の設定ファイルを追加し、以下のように記述します。
Rails.application.config.dartsass.builds = {
"top/index.scss" => "top.css",
"users/index.scss" => "users.css",
}
そしてサーバーを再起動するとapp/assets/buildsディレクトリにtop.css, users.cssが作成されているはずです。
あとはこのファイルを erb ファイルで個別に読み込めば良いので、application.html.erbの<head>内に以下を追記します。
+ <%= stylesheet_link_tag params[:controller] %>
これで無事に個別ディレクトリ毎に CSS を適用することができました。
ちなみに、Sass でこれまで使用していた @import はサポート終了予定なので、@use などを使用した構成に変えていかねばなりません。
ここでは触れませんが、以下が Sass のファイル構成について詳しく書いてあったので参考にしてみると良いかもしれません。
それでは、お疲れ様でした◎
Discussion