node.jsのv14環境下のcreate-react-appでnode-sassは使ってはいけない

お久しぶりです。

今回はcreate-react-appから生成したReactアプリでscssファイルを使用しようとしたところ、少し躓いたのでメモ的な記事です。ネット検索するとまだ問題の方法を使った記事ばかりがヒットするためそれの警鐘的な意味も込めて。多分create-react-appじゃない方法で作成したReactアプリも同様にいけるはず。

どんな問題が起こったのか

node-sassをインストールしたところ自分のnode.jsがv14だったためエラーが出て使用できなかった
調べたところnode-sass自体が非推奨になっていた（参照元）

※筆者はReactアプリにscssファイルを導入するのは初めてだった

どう対処したか

この記事みたいにnodejsをダウングレードするのは嫌だったので（そもそも他のライブラリは普通に使えているし）、他にもう少し楽な方法がないか見てみたところ、移行先として案内されていたdart-sassのREADMEにしっかり書かれていた。

github.com

最初Dart *1言語で書かれているライブラリが本当にそのままnpm installでいけるの？って思ったけどサクッといけた。

dart-sassの使用手順は以下の通り。

1） create-react-appで生成したローカルのReactアプリで、npmからsassをインストール

Homebrewとか他のパッケージ管理システムでも使える様子。

npm i sass
or
yarn add sass

2）あとはscssファイルを作成して、普通にscss書いてnpm startすれば適用される

今回の現象と対処で思ったこと

今回は自分のnode.jsがたまたまv14だったので気づけたが、インストールするライブラリがdeprecated（非推奨）になってないかは公式のサイトやリポジトリ、npmページで確認
ネット検索で出てくるインストール方法は鵜呑みにしすぎないこと。結局は英語の原文orGoogle翻訳かまして読むのが一番。（最近のGoogle検索は内容微妙なのにSEOだけ対策しまくっているサイトが先頭にきてしまう仕組みなので）

以上です。また思いついたら記事出します。