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

## はじめに

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

https://qiita.com/mishina2228/items/d4b9af22d0096ee451d7

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

https://github.com/rails/dartsass-rails

https://techracho.bpsinc.jp/hachi8833/2022_03_02/116014

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

## 移行手順
### dartsass-rails の導入
dartsass-rails の README の [Installation](https://github.com/rails/dartsass-rails/#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` は削除する。
```diff
  web: bin/rails server -p 3000
- css: yarn build:css --watch
+ css: bin/rails dartsass:watch
```

### cssbundling-rails, Dart Sass の削除
#### `Gemfile`
```diff
- gem 'cssbundling-rails'
```
#### `package.json`
```diff
    "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](https://github.com/rails/dartsass-rails/#building-in-production) で説明されている通り、`bin/rails assets:precompile` を実行すると `bin/rails dartsass:build` が事前実行されるようになる。([ソース](https://github.com/rails/dartsass-rails/blob/4d6772677ef49b05756f7141ab4fee2782077592/lib/tasks/build.rake#L35))

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

https://github.com/rails/importmap-rails/issues/80#issuecomment-985563223

> 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](https://github.com/rails/dartsass-rails/#configuring-build-options) を参考に、 `config/initializers/dartsass.rb` で build options を設定する。
```ruby
Rails.application.config.dartsass.build_options << ' --load-path=node_modules'
```

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

## 感想
Dart Sass は依存ライブラリが結構多いので `yarn.lock` の記載量も多くなるのだが、それが無くなってスッキリした。 参考までに Dart Sass を削除したときの Diff は [こちら](https://github.com/mishina2228/oanda-api-rails/commit/67592ab69557fd4ac027f588186342abbfe6e5b5#diff-51e4f558fae534656963876761c95b83b6ef5da5103c4adef6768219ed76c2de)。
([chokidar](https://www.npmjs.com/package/chokidar) の依存ライブラリが多い模様)

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