node-sass導入の壁

Node.js, npm, Python, Sass, VC++, Web, Windows, Windows 10

Webクライアントの古い開発環境をWindows PCにクローンし,npmでnode-sassを個別に入れなければならないケースがあった。

その際にちょっとした壁にぶち当たったので,どのような手順を踏めばnode-sassが入れられるのか,ここにメモを残す。


ぶち当たった壁

npm install node-sass をした後にgulpでSassのコンパイルを実行しようとすると,大量のエラー文が表示され,コンパイルが中断されてしまった。

エラー文をよく見ると「Python 2.7が見つからないよ」(英語)という内容が含まれている。

node-sassに必要なもの

node-sassを使うためには,事前にそれ自体をビルドするためにPython 2.7とVCBuild.exe(VC++のビルド環境)が必要である。

結局どうすればよいのか

以下の手順でPython 2.7とwindows-build-toolsを両方ともインストールする必要がある。

node-sassを使おうとしたコンソール環境(コマンドプロンプトなど)は一度閉じておこう。

Python 2.7をインストールする

次のリンク先にアクセスし,Python 2.7のインストーラをダウンロードし,インストールする。

https://www.python.org/downloads/

Python 2.7のインストーラは自動的にPATHを通してくれるような親切設計にはなっていないので,自分で通す必要がある。

デスクトップ画面左下のWindowsロゴマークをクリックし,そのままキーボードで「環境変数」とタイプすると,候補に「システム環境変数の編集」が表示されるので,それをクリックする。

表示される画面の下の方にある「環境変数」ボタンをクリックする。

Python 2.7を今サインインしているWindowsアカウントでのみ使う場合は「ユーザー環境変数」の「Path」にPython 2.7のフォルダパスを追加する。

PCの全ユーザーで使う場合は「システム環境変数」の「Path」に追加する。

特に独自のPath設定をせずにPython 2.7を普通にインストールした場合,「Path」に追加すべきフォルダパスは次のようになる。

c:\Python27

VC++のビルド環境をインストールする

既にNode.js(と同梱のnpm)はインストールされているものとする。

コマンドプロンプトを管理者権限で開き,次のコマンドを実行する。

npm i --global --production windows-build-tools

何分か,ひょっとしたら10分以上もの間インストール処理が続くけど,我慢して待つ。

インストールが終了したら,その旨のメッセージが緑色の文字できちんと表示される。

node-sassの動作確認

以上の手順ができたら,node-sassによるSassコードのコンパイル処理を再び行ってみよう。