前端中集成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
最后项目成功启动!!!!
同时我也看到网上很多离线安装的教程,但是推荐大家还是找一套合适的配置,因为即使离线安装了,项目运行起来,也不一定就会是百分百兼容的,上述配置仅供参考。
更多推荐
所有评论(0)