Atomでnode-sassを使用するsass-autocompileが「compilation error」と表示されて使えなくて困ったんですけど、いろいろ試して解決したのでそのお話。

OSはWindowsです。

まず概要と原因

「何もしてないのに壊れた！」という人に対して「何もしてないのに壊れるわけねぇだろ！」と一喝していたぼくでも、今回は「何もしてないのにエラー吐きまくりだ！」状態だったんですよ。

ぼくはnpmのインストーラーとAtomのパッケージ「sass-autocompile」でしかNode.jsを使っていませんでしたが、ある日突然、AtomでSASSのコンパイルができなくなりまして。

で、そこから色々と調べたりしてたんですが、原因はNode.jsのバージョンが上がったことによる何かが原因(いまいちわかってない…)らしく、検索してみると同じように困ってらっしゃる方が少なからず居はりました。

リビルドもしたしPythonも入れ直したりもしたけど解決できなかったら、読んでみてください。

あ、Nodistが入ってる前提で書いてますけど、プレーンなNode.jsを使ってる場合でも同じような感じですよ。

Nodistを使ってたら何もかも完全に削除すべし

ぼくの場合、そもそもNode.jsを使うときにNodistを使ってたのがややこしくて、まずはNodistをアンインストールしたんですけど、Nodistってアンインストールしてもファイルはなぜか生きてるんですよね。

だので、Nodistを使ってるならまず完全にファイルを削除しないといけません。

コントロールパネルからNodistを選択してアンインストールしたら、下記の方法でレッツトライ！

Nodistがアンインストールされたか確認

Win+Rで「ファイル名を指定して実行」が起動したら、cmdと入れてコマンドプロンプトを開いてください。バージョンをチェックします。

nodist -v

Nodistが正常にアンインストールされていれば、下記のような文言が表示されると思います。

'nodist' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

同じように一応、Node.jsもアンインストールされているか確認してください。

node -v

こちらもバージョンが表示されなかったらだいじょうぶです。

もしそれぞれで「v15.5.0」のようなバージョンが表示されたらアンインストールされてないってことなので、確実にアンインストールしてください。

Nodistフォルダを削除

無事にアンインストールが成功したら、次は下記にエクスプローラーでアクセスして「Nodist」のフォルダを削除します。

C:\Program Files (x86)

Nodistをインストールしたときにインストール先のフォルダを変えてなかったら上記のままですが、64bitであればこっちの可能性もあります。どちらも確認したほうが良いです。

C:\Program Files

.npmrcファイルを削除

.npmrcが残ったままになってるとこいつがうまいことNodistのフォルダを参照しようとするので、下記にアクセスして.npmrcを削除しましょう。

C:\Users\ユーザー名

npm-cacheフォルダを削除

npm-cacheはAppDataに存在していますが、AppDataは隠しフォルダになっているのでエクスプローラーの「表示」タブから「隠しファイル」という項目があるのでチェックを入れておきます。

今までと同じように下記にアクセスしてnpm-cacheを削除します。

C:\Users\ユーザー名\AppData\Roaming

パスが通っていれば削除する

続いて変なパスが通っていないかを確認しましょう。Win+Rで「ファイル名を指定して実行」を開き、sysdm.cplと入れて「システムのプロパティ」を開きます。

詳細設定 → 環境変数 へと進み、「Node」や「Nodist」などの文言を含むパスがあれば削除してください。

Node.jsをインストールする

ここまででクリーンな環境が作れたと思いますので、ここからsass-autocompileが正常に使えるまでを解説します。

まずはこれがないと始まらないので、Node.jsをインストールします。

バージョンは何でも良いですが、推奨版になっているものを使ったほうが良いかもしれません。

2020年12月現在では14.15.3が推奨版となっています。

コマンドプロンプトからnode-sassをインストールする

Node.jsが無事にインストールできたら、Win+Rにcmdと入れてコマンドプロンプトを起動させて、下記コマンドでNode.jsがインストールされているか確認しておきましょう。

node -v

するとこのようなレスポンスがあるはずです。

C:\Users\ユーザー名>node -v
v14.15.3

数字の部分はバージョンなので時期により色々と変わります。次にnode-sassをインストールします。インストールはNode.jsのnpmを使ってグローバルにインストールしましょう。

npm install -g node-sass

しばらく待つと下記のようにずらずらーっと文字が出てきてインストールが完了します。

C:\Users\ユーザー名>npm install -g node-sass
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
C:\Users\ユーザー名\AppData\Roaming\npm\node-sass -> C:\Users\ユーザー名\AppData\Roaming\npm\node_modules\node-sass\bin\node-sass

> node-sass@5.0.0 install C:\Users\ユーザー名\AppData\Roaming\npm\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v5.0.0/win32-x64-83_binding.node
Download complete .] - :
Binary saved to C:\Users\ユーザー名\AppData\Roaming\npm\node_modules\node-sass\vendor\win32-x64-83\binding.node
Caching binary to C:\Users\ユーザー名\AppData\Roaming\npm-cache\node-sass\5.0.0\win32-x64-83_binding.node

> node-sass@5.0.0 postinstall C:\Users\ユーザー名\AppData\Roaming\npm\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Users\ユーザー名\AppData\Roaming\npm\node_modules\node-sass\vendor\win32-x64-83\binding.node
Testing binary
Binary is fine
+ node-sass@5.0.0
added 195 packages from 144 contributors in 15.369s

警告が出てますがだいじょうぶです。

node-sassもインストールを確認しておきましょう。

node-sass -v

下記のレスポンスがあれば成功しています。

C:\Users\ユーザー名>node-sass -v
node-sass       5.0.0   (Wrapper)       [JavaScript]
libsass         3.5.5   (Sass Compiler) [C/C++]

あとはAtomを立ち上げてパッケージからsass-autocompileをインストールするだけですね！

ここまでくれば成功です。

Error: Missing binding /project_root/node_modules/node-sass/vendor/darwin-x64-72/binding.nodeになるときの対処法

もしnode-sass -vでコマンドを叩いて「Error: Missing binding /project_root/node_modules/node-sass/vendor/darwin-x64-72/binding.node」とかそれに似た表示が返ってきたら、何かに邪魔されていてnode-sassが使えなくなっています。

リビルドもへったくれもあったもんじゃないですが、試しにこのコマンドでnode-sassをリビルドしてみましょう。

npm rebuild node-sass

無理かなー？

アセットファイルを書き換える

リビルドしても無理ならもういちど、コマンドプロンプトでnode-sass -vを叩きましょう。

Error: Missing binding /project_root/node_modules/node-sass/vendor/darwin-x64-72/binding.node

先ほどと同じようにレスポンスされると思うので、「darwin-x64-72」の文字になっているバージョンと同じものを下記からダウンロードします。

続きまして下記までエクスプローラーで移動して、vendorディレクトリに上書きします。

C:\Users\ユーザー名\AppData\Roaming\npm\node_modules\node-sass\vendor

これで使えるようになる…はずです。