[TOC]
問題背景
開發(fā)新的前端項(xiàng)目時(shí)，總少不了搭建開發(fā)環(huán)境和執(zhí)行npm install安裝依賴包，但npm install的過程總是充滿著玄學(xué)，很難保證一次性成功，其中尤其以node-sass這個(gè)包的安裝失敗問題最為常見。
像其他npm包安裝失敗，通常是因?yàn)榫W(wǎng)絡(luò)問題，可以采用使用更好的網(wǎng)絡(luò)環(huán)境或者切換源的方式進(jìn)行安裝，比如使用淘寶的源進(jìn)行安裝，命令如下：
npm install --registry=https://registry.npm.taobao.org
但node-sass安裝失敗這個(gè)問題似乎無法通過上述命令解決。本文將總結(jié)遇到此類問題時(shí)的解決方案。
問題描述
筆者的測試環(huán)境如下：
操作系統(tǒng)：Windows 11
Node版本：v14.16.0
Npm版本：6.14.11
遇到的node-sass安裝失敗的報(bào)錯(cuò)如下：
gyp ERR! find VS
gyp ERR! find VS msvs_version not set from command line or npm config
gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
gyp ERR! find VS checking VS2022 (17.5.33530.505) found at:
gyp ERR! find VS "D:\Program Files\Microsoft Visual Studio\2022\Community"
gyp ERR! find VS - found "Visual Studio C++ core features"
gyp ERR! find VS - found VC++ toolset: v143
gyp ERR! find VS - missing any Windows SDK
gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use
gyp ERR! find VS looking for Visual Studio 2015
gyp ERR! find VS - not found
gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
gyp ERR! find VS
gyp ERR! find VS **************************************************************
gyp ERR! find VS You need to install the latest version of Visual Studio
gyp ERR! find VS including the "Desktop development with C++" workload.
gyp ERR! find VS For more information consult the documentation at:
gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
gyp ERR! find VS **************************************************************
gyp ERR! find VS
gyp ERR! configure error
gyp ERR! stack Error: Could not find any Visual Studio installation to use
gyp ERR! stack at VisualStudioFinder.fail (D:\temp\npm-temp\node_modules\node-gyp\lib\find-visualstudio.js:122:47)
gyp ERR! stack at D:\temp\npm-temp\node_modules\node-gyp\lib\find-visualstudio.js:75:16
gyp ERR! stack at VisualStudioFinder.findVisualStudio2013 (D:\temp\npm-temp\node_modules\node-gyp\lib\find-visualstudio.js:363:14)
gyp ERR! stack at D:\temp\npm-temp\node_modules\node-gyp\lib\find-visualstudio.js:71:14
gyp ERR! stack at D:\temp\npm-temp\node_modules\node-gyp\lib\find-visualstudio.js:384:16
gyp ERR! stack at D:\temp\npm-temp\node_modules\node-gyp\lib\util.js:54:7
gyp ERR! stack at D:\temp\npm-temp\node_modules\node-gyp\lib\util.js:33:16
gyp ERR! stack at ChildProcess.exithandler (child_process.js:315:5)
gyp ERR! stack at ChildProcess.emit (events.js:315:20)
gyp ERR! stack at maybeClose (internal/child_process.js:1048:16)
gyp ERR! System Windows_NT 10.0.22621
gyp ERR! command "C:\\Users\\zzcoder\\AppData\\Local\\nvs\\default\\node.exe" "D:\\temp\\npm-temp\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd D:\temp\npm-temp\node_modules\node-sass
gyp ERR! node -v v14.16.0
gyp ERR! node-gyp -v v8.4.1
gyp ERR! not ok
Build failed with error code: 1
npm WARN npm-test@1.0.0 No description
npm WARN npm-test@1.0.0 No repository field.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@8.0.0 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@8.0.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\zzcoder\AppData\Roaming\npm-cache\_logs\2023-05-06T06_13_42_083Z-debug.log
附上報(bào)錯(cuò)截圖：
解決方案
1. 檢查node-sass安裝版本是否正確。
本地安裝的node版本不同，需要安裝的node-sass版本也是不一樣的。node-sass官方給出了不同版本的node和node-sass的對應(yīng)關(guān)系，讀者可訪問node-sass github倉庫或者node-sass npm倉庫進(jìn)行查看。
本地安裝的node版本，可以使用如下命令進(jìn)行查看：
node -v
下圖為截至node-sass@8.0.0版本時(shí)的對應(yīng)關(guān)系。
在項(xiàng)目中還沒有package.json或者有package.json但是此文件沒有指定node-sass的版本時(shí)，默認(rèn)會(huì)安裝node-sass的最新版本。由于筆者安裝的node版本時(shí)14.16.0，執(zhí)行npm install node-sass命令默認(rèn)安裝了撰寫本文時(shí)的node-sass最新版本8.0.0，所以才有了前文中報(bào)錯(cuò)。
根據(jù)版本對應(yīng)關(guān)系，筆者應(yīng)該安裝node-sass的4.14+版本，因此需要將安裝命令改為：
npm install node-sass@^4.14.0 --registry=https://registry.npm.taobao.org
這樣就是使用淘寶源來安裝node-sass的4.14+中的最新版本。
2. 檢查是否是網(wǎng)絡(luò)問題
在使用npm install安裝node-sass時(shí)，會(huì)從 github.com 上下載 .node 文件。由于國內(nèi)網(wǎng)絡(luò)環(huán)境的問題，這個(gè)下載時(shí)間可能會(huì)很長，甚至導(dǎo)致超時(shí)失敗。
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
> node-sass@8.0.0 install D:\temp\npm-temp\node_modules\node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v8.0.0/win32-x64-83_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v8.0.0/win32-x64-83_binding.node":
HTTP error ETIMEDOUT request to https://github.com/sass/node-sass/releases/download/v8.0.0/win32-x64-83_binding.node failed, reason: connect ETIMEDOUT 20.205.243.166:443
Hint: If github.com is not accessible in your location
try setting a proxy via HTTP_PROXY, e.g.
export HTTP_PROXY=http://example.com:1234
or configure npm proxy via
npm config set proxy http://example.com:8080
> node-sass@8.0.0 postinstall D:\temp\npm-temp\node_modules\node-sass
> node scripts/build.js
附上報(bào)錯(cuò)截圖。
這種情況下僅使用--registry參數(shù)指定npm包的下載源是不夠的，還需要使用--sass_binary_site參數(shù)指定sass二進(jìn)制文件的下載源，因此需要將安裝命令改為：
npm install node-sass@^4.14.0 --registry=https://registry.npm.taobao.org --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
這樣一來就是指定node-sass版本，指定npm包下載源為淘寶源，指定sass下載源為淘寶源，使用此命令基本就都能安裝成功了。
總結(jié)
遇到node-sass安裝失敗時(shí)，可以使用以下命令：
# 查看本地node版本
node -v
# 安裝node-sass
npm install node-sass@[本地node所對應(yīng)的node-sass版本] --registry=https://registry.npm.taobao.org --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
通過下表查看版本對應(yīng)關(guān)系，也可訪問node-sass github倉庫或者node-sass npm倉庫進(jìn)行查看。
歡迎批評指正。
