Rails: Propshaft と Dart Sass for Rails を試す

外観

Propshaft と Dart Sass for Rails を使用して Node.js なしで Turbo Rails Tutorial の Chapter 2 Organizing CSS files in Ruby on Rails まで進めてみました。

環境

ruby 3.1.0p0
Rails 7.0.2.2
Propshaft 0.6.4
Dart Sass for Rails 0.3.0

雛形作成

propshaft を指定して rails new する。
dartsass-rails gem を追加してインストールする。

rails _7.0.2.2_ new quote-editor-w-dartsass-rails --asset-pipeline=propshaft
cd quote-editor-w-dartsass-rails
bin/bundle add dartsass-rails
bin/rails dartsass:install

ローカルdevelopment環境でサーバーを起動する。

bin/setup
bin/rails db:seed
bin/dev

Dart Sass for Rails 対応

既存の application.css は使用しないので削除する。
チュートリアルで作成する application.sass.scss を application.scss に改名する。置き換えてチュートリアルを進めれば良い。
念のためにビルドできることを確認する。

bin/rails dartsass:build

チュートリアルを始める。Chapter 2まで問題なし。

@use への置き換え

今年の10月に廃止されるとのことなので @import を @use に置き換えてみました。

名前空間を付ける。

OLD: media(tabletAndUp)
NEW: media.media(tabletAndUp)

_container.scss などに @use を追加する。

@use "../mixins/media";

ビルドできることを確認する。

bin/rails dartsass:build

production環境

ローカルproduction環境でサーバーを起動する。

RAILS_ENV=production bin/setup
RAILS_ENV=production bin/rails db:seed
RAILS_ENV=production bin/rails assets:precompile
​RAILS_SERVE_STATIC_FILES=1 bin/rails server --environment production

後片付け。

bin/rails assets:clobber
bin/rails log:clear tmp:clear

付録

覚書: Rails: Getting Started with Ruby on Rails on Render｜usutani｜note

以上です。