前端中集成sass-loader，node-sass报错问题

这里推荐的最终的实现方法是一套具体版本配置（个人亲测可用）

今天项目在集成sass 语法的时候，安装 sass-loader时很顺利，但是安装node-sass的时候就出现了问题，报错如下：

npm ERR! code 1
npm ERR! path D:\Code\yuneban\code\vue\yeb\node_modules\node-sass        
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe D:\Code\yuneban\code\vue\yeb\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'D:\\Code\\yuneban\\code\\vue\\yeb\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.14.0 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb download using dist-url https://npm.taobao.org/dist    
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at D:\Code\yuneban\code\vue\yeb\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at D:\Code\yuneban\code\vue\yeb\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2      
npm ERR! gyp verb `which` failed     at getNotFoundError (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at getNotFoundError (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at D:\Code\yuneban\code\vue\yeb\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at D:\Code\yuneban\code\vue\yeb\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2      
npm ERR! gyp verb `which` failed     at getNotFoundError (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at D:\Code\yuneban\code\vue\yeb\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at D:\Code\yuneban\code\vue\yeb\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python
npm ERR! gyp verb `which` failed     at getNotFoundError (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at D:\Code\yuneban\code\vue\yeb\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at D:\Code\yuneban\code\vue\yeb\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb `which` failed  python Error: not found: python        
npm ERR! gyp verb `which` failed     at getNotFoundError (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at D:\Code\yuneban\code\vue\yeb\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at D:\Code\yuneban\code\vue\yeb\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at D:\Code\yuneban\code\vue\yeb\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb could not find "python". checking python launcher      
npm ERR! gyp verb could not find "python". guessing location
npm ERR! gyp verb ensuring that file exists: C:\Python27\python.exe      
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
npm ERR! gyp ERR! stack     at PythonFinder.failNoPython (D:\Code\yuneban\code\vue\yeb\node_modules\node-gyp\lib\configure.js:484:19)
npm ERR! gyp ERR! stack     at PythonFinder.<anonymous> (D:\Code\yuneban\code\vue\yeb\node_modules\node-gyp\lib\configure.js:509:16)
npm ERR! gyp ERR! stack     at callback (D:\Code\yuneban\code\vue\yeb\node_modules\graceful-fs\polyfills.js:299:20)
npm ERR! gyp ERR! stack     at FSReqCallback.oncomplete (node:fs:198:21) 
npm ERR! gyp ERR! System Windows_NT 10.0.22000
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\Code\\yuneban\\code\\vue\\yeb\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd D:\Code\yuneban\code\vue\yeb\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.14.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1   

首先要说的是，会分析问题真的一个好的习惯，遇到问题先看自己，自己报错信息，可以发现很多有用的有价值的东西，就像治病一样，通过错误日志，找出出错的问题，然后再去找对应的解决方案。

我分析了一下我的问题：
首先，在错误日志的开始部分：

他这里出现了 python2 的字样，然后我通过研究发现这个项目时依赖python的，所以我们需要去配置python，python环境搭建还是很简单的，我一开始没有认真看，我以为是需要python2，因此火急火燎的下载了python2，等配置好才发现，python2不支持node-sass，然后通过查找了一些大神提供的宝贵的资料发现，可以使用python一个主流的版本 python 3.9 是支持node-sass 的至少我后面在运行的时候没有因为这个问题报错。

第一个问题解决以后，不用想，没有那么简单的，通过这个日志最后的信息，我发现了，这里还有一个问题：

大概的意思就是node版本有问题咯，我安装的node比较新的版本，因为在搭建项目的时候，看到需要node.js 我就去官网下载了一个当下的主流版本的node，事实证明一个道理，最主流的，并不一定是最适合你的。话不多说，那就去找适合node-sass的node.js版本

经过官方文档的一下查看，我找到了一套合适的配置：（仅供参考）
一开始以为找到python,node和node-sass就完事了，最后发现其实并没有那么简单，node-sass不是那么简单的，最后奋斗一晚上，一下午，我终于找到一套合适的依赖。

本人亲测有效，下面直接贴代码：

首先是 python

python 3.9.10
地址:https://www.python.org/downloads/release/python-3910/

一般都是64位当然也有Linux系统的，大家可以去找找相关教程

下载好一路下一步无脑就行，最后记住项目的路径
配置到环境变量的path中
此电脑（右击）–> 属性 --> 高级系统设置 --> 环境变量 --> 系统变量
点开path 新建一个，将python路径放进去

Win + R --> cmd
输入 python 看是否能进入python界面

成功！！

node.js

Node v14.15.0 (LTS)
地址：https://nodejs.org/en/blog/release/v14.15.0/

直接无脑安装就行

webpack

webpack 版本 v4.0.0 
npm install webpack@^4.0.0 --save-dev

• webpack 是在项目启动的时候发现的

sass-loader

sass-loader 版本 v7.1.0  
npm i sass-loader@7.1.0 --save-dev

node-sass

node-sass 版本 v4.14.0  
npm i node-sass@4.14.0 --save-dev

最后项目成功启动！！！！
同时我也看到网上很多离线安装的教程，但是推荐大家还是找一套合适的配置，因为即使离线安装了，项目运行起来，也不一定就会是百分百兼容的，上述配置仅供参考。