整理 node-sass 安装失败的原因及解决办法(小结)


Posted in Javascript onFebruary 19, 2020

npm install 时偶尔遇到报错:没有安装python或node-sass 安装失败的问题,百度之后发现是被墙了,但根据百度的方法换了淘宝镜像和用了vpn都安装失败,最后发现原来是因为没有卸载之前安装失败的包导致的。作者本人最后的解决方案是npm uninstall node-sass,然后使用VPN重新安装了一遍就成功了。不能翻墙的同学请看下文

node-sass 安装失败的原因

npm 安装 node-sass 依赖时,会从 github.com 上下载 .node 文件。由于国内网络环境的问题,这个下载时间可能会很长,甚至导致超时失败。

这是使用 sass 的同学可能都会遇到的郁闷的问题。

解决方案就是使用其他源,或者使用工具下载,然后将安装源指定到本地。

解决方法一:使用淘宝镜像源(推荐)

设置变量 sass_binary_site,指向淘宝镜像地址。示例:

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

// 也可以设置系统环境变量的方式。示例
// linux、mac 下
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass

// window 下
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ && npm install node-sass

或者设置全局镜像源:

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

之后再涉及到 node-sass 的安装时就会从淘宝镜像下载。

解决方法二:使用 cnpm

使用 cnpm 安装 node-sass 会默认从淘宝镜像源下载,也是一个办法:

cnpm install node-sass

解决方法三:创建.npmrc文件

在项目根目录创建.npmrc文件,复制下面代码到该文件。

phantomjs_cdnurl=http://cnpmjs.org/downloads
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org

保存后 删除之前安装失败的包(第一次安装请跳过此步)

npm uninstall node-sass

重新安装

npm install node-sass

作者后来另一个项目在没有使用VPN的情况下测试此方法,安装时报错 ERR! node-sass@3.8.0 postinstall: `node scripts/build.js 改用方法一成功。

解决方法四:下载 .node 到本地

到这里去根据版本号、系统环境,选择下载 .node 文件,然后安装时,指定变量 sass_binary_path,如:

npm i node-sass --sass_binary_path=/Users/lzwme/Downloads/darwin-x64-48_binding.node

安装失败后重新安装问题

之前安装失败,再安装就不去下载了,怎么办呢?那就先卸载再安装:

npm uninstall node-sass
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

相关错误提示

提示没有安装python、build失败等,如:

gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "C:\Users\zhuon\AppData\Local\Programs\Python\Python36\python.EXE", you can set the PYTHON env variable.
gyp ERR! stack   at PythonFinder.failNoPython (G:\Workspace\ManYan\manyan-nav\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack   at PythonFinder.<anonymous> (G:\Workspace\ManYan\manyan-nav\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack   at G:\Workspace\ManYan\manyan-nav\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack   at FSReqWrap.oncomplete (fs.js:152:21)
gyp ERR! System Windows_NT 10.0.15063
gyp ERR! command "C:\\dev\\nodejs\\node.exe" "G:\\Workspace\\ManYan\\manyan-nav\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags="
"--libsass_library="
gyp ERR! cwd G:\Workspace\ManYan\manyan-nav\node_modules\node-sass
gyp ERR! node -v v8.4.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
Build failed
npm WARN co-mocha@1.2.0 requires a peer of mocha@>=1.18 <4 but none was installed.
npm WARN egg-restapi-module-tool@1.0.0 No repository field.
npm WARN egg-restapi-module-tool@1.0.0 scripts['server'] should probably be scripts['start'].

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@3.8.0 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@3.8.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!   D:\nodejs\cache\_logs\2017-09-02T16_06_24_298Z-debug.log

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JScript内置对象Array中元素的删除方法
Mar 08 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
理解Javascript闭包
Nov 01 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 Javascript
Vue常用的全选/反选的示例代码
Feb 19 #Javascript
详解node和ES6的模块导出与导入
Feb 19 #Javascript
JS实现分页导航效果
Feb 19 #Javascript
vue随机验证码组件的封装实现
Feb 19 #Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 #Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 #Javascript
Vue.js仿Select下拉框效果
Feb 18 #Javascript
You might like
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python中property函数用法实例分析
2018/06/04 Python
对pandas中to_dict的用法详解
2018/06/05 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
python列表推导式入门学习解析
2019/12/02 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
Tensorflow累加的实现案例
2020/02/05 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
食品行业求职人的自我评价
2014/01/19 职场文书
六一儿童节活动总结
2014/08/27 职场文书
银行自荐信怎么写
2015/03/05 职场文书
家装电话营销开场白
2015/05/29 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python