久々の投稿でございます。

WEB開発やサイトデザイン時のCSSのコーディングにnode-sassを使ってて -watch オプション付けてscssファイルのセーブ時に自動コンパイルさせてたんですが、

ほぼ毎回「File to read not found or unreadable」てなエラーを吐いてコンパイルに失敗しておりました。

まあ、しつこく何度もセーブしてれば何度目かには成功するんですが・・・ さすがに10回も20回もCTRL+Sを連打するのに嫌気がさしまして 根本的な問題の解決を図ろうとしたわけです。

エラーの内容は見ての通り「ファイルが見つからないかたどりつけない」ってことを node-sassくんはおっしゃてるわけですよ。

あ、ファイルはちゃんとありますよ。not found は除外していいわけです。

次に考えられるのは unreadable なので、ファイルまでの階層が深くてだめなのかなと思った次第です。 じゃあ、ドライブ直下で試してみたらいいじゃなあーい、と試してみたけど相変わらず。 多少はエラー頻度が下がったかな？程度でやっぱエラーは起きるのですよ。

それに開発の関係でソースコードの階層が深いことなんてざらにあるし、 もしそれが問題でパフォーマンスに影響出るなら、実用に値してないじゃん、ってなりまして。

「困ったときのgoogle先生」

てことでググってみたら、やはり同じような状態で困ってる人がいたみたいで 解決策が提示されてました。

「node-sass だめぽ。dirt-sass 使えば幸せになれるよ（超意訳）」

　根本的というか、根底から覆す感じの答えキター(ﾟ∀ﾟ)

てことでnode-sassをuninstallしてsass（dart-sass）をインストールすることにしました。

ついでに、 「最近 node.js 関連のアップデートしてなかったなー」 と思いつきまして、そそくさとアップデートに取り掛かったんですが、 「あれ？ npm のアップデートってどうやるんだっけ？」 となりまして、タイトルのように相成りました。

　（前置きのほうが10倍長いな (´・ω・｀)

さらっとおさらい

# npmでグローバルにインストールされているパッケージのリストを0階層のみ表示
npm -g list --depth=0

# npm でグローバルにインストールされているバージョンと要求および最終リリースの確認
npm -g outdate

# アップデート
npm -g update [パッケージ名]

# アンインストール（ remove とかもあるけどわかりやすいのでuninstallを使う派 ）
npm -g uninstall node-sass

# インストール
npm -g install sass

sass（dart-sass）が入ったので早速、使用してみる。

node-sassと若干コマンドに差がある

# node-sass の場合
node-sass -w hoge.scss hoge.css

# sass の場合
sass -w hoge.scss:hoge.css

コマンド -オプション input output

の書式だけどsassのほうでは、inputとoutputをコロンでつなぐようです。 ちなみに-wはwatchオプションでファイルの変更を監視して保存時に自動コンパイルしてくれます。

うむ、エラーもなくなったし、さくさくコンパイルしてくれてええかんじじゃわい。

sass -w hoge.scss:hoge.css --style compressed

スタイルの指定でminify（コンパクト化）もしてくれる。mapファイルもちゃんと作ってくれるので安心。

minifyせずにソースマップもいらない場合は --no-source-map オプションをつける。

sass -w hoge.scss:hoge.css --no-source-map

ほかにもいろいろとオプションはあるので気になる人は調べてみてね（丸投げ）

てことで備忘録でした(｡･ω･)ﾉﾞ