Dart Sass + cssbundling-rails から dartsass-rails に移行した

はじめに

以前書いた記事で、 Webpacker から importmap-rails + Propshaft + cssbundling-rails への移行で実施したことを紹介した。

このときは Dart Sass を使っていたため、 Node.js が必要な状態だったが、 dartsass-rails はバイナリファイルをラップしているため、これを使えば package.json を使った JavaScript パッケージのバージョン管理や、肥大化する node_module ディレクトリから解放されるかも！と思い移行してみた。

しかし、結論から言うと相変わらず Node.js は必要だった。。。

移行手順

dartsass-rails の導入

dartsass-rails の README の Installation を実行する。

./bin/bundle add dartsass-rails
./bin/rails dartsass:install

2番目のコマンド実行で、いくつかのファイルが追加・変更されるが、そのままでは使えないので手を入れる。

app/assets/stylesheets/application.scss

• dartsass-rails がデフォルトでビルドするファイル。ここに必要なライブラリを記載する。
• cssbundling-rails では app/assets/stylesheets/application.sass.scss を使っていたので、このファイルの中身を application.scss に移動する。
• 要するに application.sass.scss を application.scss にリネームする。

Procfile.dev

• css: bin/rails dartsass:watch という1行が追加されるので、既存の css: yarn build:css --watch は削除する。

  web: bin/rails server -p 3000
- css: yarn build:css --watch
+ css: bin/rails dartsass:watch

cssbundling-rails, Dart Sass の削除

Gemfile

- gem 'cssbundling-rails'

package.json

    "devDependencies": {
-     "sass": "^1.57.1",
  
  ...
  
-   "scripts": {
-     "build:css": "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
-   }

build コマンドの調整

yarn build:css を指定している箇所があれば、 bin/rails dartsass:build とか bin/rails assets:precompile に置き換える。

• Building in production で説明されている通り、bin/rails assets:precompile を実行すると bin/rails dartsass:build が事前実行されるようになる。(ソース)

Build options の調整

さて、ここまでで Dart Sass は削除できたので、いざ Node.js を排除しようと思ったのだが、ここに来て問題が発覚した。
自分はてっきり importmap-rails を使えば config/importmap.rb に記載のあるライブラリの CSS を使用できるのだと思い込んでいたのだが、そのような機能は無かった。

We don't know what is the best way to include the css.
I'm wondering if it could be useful to automatically/optionnaly vendor the css when downloading the js ?

Yeah, you'll have to do this by hand. We don't have an API that could figure out what assets might be needed in addition to the main JS file.

つまり Node.js を使いたくなければ、 CSS を手作業で管理しなければいけない、ということらしい。
ライブラリのバージョン管理は Yarn などツールに任せたいところなので、 Node.js は続投とし、 node_modules ディレクトリのアセットを参照できるようにする。

dartsass-rails はデフォルトでは node_modules ディレクトリを参照しないので、 Configuring build options を参考に、 config/initializers/dartsass.rb で build options を設定する。

Rails.application.config.dartsass.build_options << ' --load-path=node_modules'

動作確認

bin/dev

画面にアクセスして、 CSS がきちんと適用されていることが確認できればOK。

感想

Dart Sass は依存ライブラリが結構多いので yarn.lock の記載量も多くなるのだが、それが無くなってスッキリした。 参考までに Dart Sass を削除したときの Diff は こちら。
(chokidar の依存ライブラリが多い模様)

結局 Node.js への依存が削除できなかったのは少し残念。。。