windows上 node-sass less编译失败的终极解决方案

2021/11/12 3:54:05npm_yarnnpm yarn

**如题,此问题仅存在于windows: **

mac以及linux不会存在此问题。非win用户可以跳过此教程。

不仅仅node-sass , less适合这篇教程,其他所有依赖node-gyp的库,均适用:

如:node-canvas库等 ,没事千万不要在windows上用node-canvas这个库,
如果想尝试玩一玩,可以参考官方文档:https://github.com/Automattic/node-canvas** **
可以以此为例,深入了解node-gyp的依赖链条和编译过程。

前言

很多项目,都会用到sass,less这两个库,难免遇到各种情况,导致项目无法启动和编译。
下面就逐个列举并分析。

可能失败的原因:

一、npm代理地址导致的安装失败:
解决办法:多切换几个镜像源,进行多次尝试。
二、node-gyp编译失败:
这个错误原因比较多,一般会出现以下几个场景:
1, 一般网上会教你适用:npm install --global --production windows-build-tools
这行命令会安装python2.x / visual C++ Build Tools / .net framework
但是可能会卡住很久,无法安装。所以也可以尝试直接先安装visual studio 2015(或更新版本),然后通过visual studio来进行安装上面三个依赖。
.net framework可以也独立安装。
2,上面一步安装完成后,再安装 npm install --global node-gyp
3,在.npmrc中配置.net framework的版本和python的版本:

npm config set msvs_version 2015

npm config set python python2.7
或者直接在:C:\用户\username.npmrc 配置文件中进行修改:

msvs_version=2015

python=python2.7
4,如果完成以上配置之后,仍然编译失败,则进一步细化的排查:
错误提示中会有:
gyp verb could not find "python2.7". checking python launcher
gyp verb check python launcher python executable found: "C:\Python27\python.exe"
经过排查,C:\Python27\python.exe是存在的,尝试在环境变量中添加:
此电脑>右键>属性>高级系统设置>高级>环境变量>系统变量>path中新增:C:\Python274
如果仍然报找不到python,则继续排查:
5,可以在错误信息中看到:
error C:\xx\node_modules\node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
这里的错误信息非常重要:
1>可以看到红色的error,
2>可以看到是哪个依赖报的错
3>可以看到是哪个命令报错

结合以上错误:直接进入到node-sass目录下,进行命令的执行:node script/build.js 可以进一步看到更详细精准的错误提示:(这一行文字是全文的精髓)
**
**

C:\xx\node_modules\node-sass\build\src\libsass.vcxproj(20,3): error MSB4019: 未找到导入的项目“C:\Microsoft.Cpp.Default.props”。请确认 声明中的路径
正确,且磁盘上存在该文件。
**

image.png

然后在搜索引起中再搜索:node-sass 未找到导入的项目“C:\Microsoft.Cpp.Default.props”,就得到一条信息:.new framework 版本不匹配,
回到上面第一步重新安装和更新.net framework:
npm config set msvs_version 2017(安装最新版本并修改这里的版本)

完成以上排查,再次进入node-sass 目录下进行编译:node script/build.js ,就可以看到一堆cpp的输出了:

c:\xx\node_modules\node-sass\src\libsass\src\sass2scss.cpp: note: 参见“_CRT_NONSTDC_NO_DEPRECATE”的前一个定义
sass_context.cpp
sass_functions.cpp
sass_util.cpp
sass_values.cpp
source_map.cpp
subset_map.cpp
to_c.cpp
to_value.cpp
units.cpp
utf8_string.cpp
util.cpp
values.cpp

12 个警告
0 个错误

最后,退出node-sass,回到项目根目录,就可以正常运行项目了。

总结:

由于node-sass/less/node-canvas....这些依赖,内部又依赖了node-gyp和C++,所以在windows电脑上,需要搭建完整的python和c++编译环境。
即使这次解决了这一对的问题,但是下次仍然可能会出现类似的问题,不过,解决思路仍然是相同的,把上面的过程重新过一遍就行了。