最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 记录安装 node-sass 失败原因及解决办法汇总

    正文概述 掘金(txBoy)   2021-04-03   1017

    我们在安装 node-sass 的时候总是会因为各种原因不成功,今天我就一口气把这些可能导致失败的坑汇总一下,以免以后再被坑。

    node-sass 安装过程分析

    首先了解一下 node-sass 安装的过程:

    1. npm 拉下 node-sass包;

    2. 根据node版本和node-sass版本拉取对应的binding.node编译器,原因是sass的编译语言比较特殊,需要下载对应版本的编译器才能编译;(node scripts/install.js 阶段)

    3. 如果能拉下binding.node就【安装成功】;

      如果找不到对应的binding.node包,即失败,然后就会尝试本地编译。

    可能失败的原因

    一、网络不稳定

    首先要知道的是,安装 node-sass 时在 node scripts/install.js 这个阶段会从 github.com 上下载一个 .node 文件,大部分安装不成功的原因都源自这里,因为 GitHub Releases 里的文件都托管在 s3.amazonaws.com 上面,而这个网址在国内总是"网络不稳定",所以我们需要通过第三方服务器下载这个文件。

    解决办法

    1. 使用淘宝镜像
    npm set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass
    

    然后重新执行 npm i node-sass 即可完成安装。

    2. 使用梯子

    假设你的梯子在你本地机器上开启了一个第三方服务器 127.0.0.1:1080,那么只需按照下面的方法配置一下就能正常安装 node-sass 了(如果你开启的是 PAC 模式而不是全局模式,那还需要将 s3.amazonaws.com 加入 PAC 列表):

    npm config set proxy http://127.0.0.1:1080
    npm i node-sass
    
    # 下载完成后删除 http 代理
    npm config delete proxy
    
    3. 本地指定.node文件

    比如我们在安装 node-sass 的时候可以发现它需要下载具体版本对应的 .node 文件:

    $ npm install --save-dev node-sass
    > node-sass@5.0.0 install D:\WorkSpace\node-sass-test\node_modules\gulp-sass\node_modules\node-sass
    > node scripts/install.js
    
    Downloading binary from http://npm.taobao.org/mirrors/node-sass/v5.0.0/win32-x64-72_binding.node
    

    如果你的办公环境不能访问外网,那么可以从有网络的电脑上将.node文件(下载对应 node-sass 版本以及对应操作系统的)下载过来,再传到离线的电脑上指定 binary 路径来安装,执行以下命令完成安装:

    npm i -D node-sass@5.0.0 --sass_binary_path=D:\files\win32-x64-72_binding.node
    

    二、本地编译没有Python环境

    方法1:通过 NPM 包

    网络正常的情况下安装 node-sass 是不需要Python环境的,如果拉不下来对应的binding.node就会进入尝试【本地编译】,然后会检查是否具备的条件:需要python环境,报的错一般就会提示python没有安装(还是 Mac 香,自带python环境没有这些烦恼),安装下面两个包可以快速解决:

    不过需要注意:拉包的方式需要cmd用管理员模式打开! ! !

    npm install -g node-gyp
    npm install --global --production windows-build-tools
    

    如果本地有网络还好,这两个包如果安装成功了,node-sass 基本就能安装成功了,但是如果你的办公环境限制网络可能也比较坑,参考:离线安装 node-gyp 。

    方法2:搭建Python环境(建议2.7)

    • 1、去官网下载 www.python.org/download/re… ;
    • 2、安装成功之后,在环境变量中的系统变量新增python的安装路径;
    • 3、执行 npm rebuild node-sass 重构一下;
    • 4、再重新执行 npm install node-sass

    三、node-sass版本与当前Node版本不匹配

    因node版本与node-sass版本不匹配导致 binding.node 拉不下来,无法编译。

    node-sass 版本的兼容性不好,老项目中依赖的 node-sass 很可能已经不兼容新的 node 版本,对应版本兼容参考如下(或官方仓库):

    NodeJSSupported node-sass versionNode Module
    Node 155.0+88Node 144.14+83Node 134.13+, <5.079Node 124.12+72Node 114.10+, <5.067Node 104.9+64Node 84.5.3+, <5.057Node <8<5.0<57

    比如我在 Node 8 的环境下安装 node-sass@3.13.1, 安装的时候就会出现找不到对应的 binding.node 而报错,如下:

    $ npm install --save-dev node-sass
    > node-sass@3.13.1 install D:\WorkSpace\mumble-next-ng\node_modules\gulp-sass\node_modules\node-sass
    > node scripts/install.js
    
    Downloading binary from http://npm.taobao.org/mirrors/node-sass/v3.13.1/win32-x64-57_binding.node
    Cannot download "http://npm.taobao.org/mirrors/node-sass/v3.13.1/win32-x64-57_binding.node":
    
    HTTP error 404 OK
    

    出现 404 了,此时更换 node-sassnode 的版本即可。

    具体参考方案:

    npm i node-sass@4.8.3
    

    因为Node 8 不能装 node-sass 3.x 这是肯定的(Node 7才对应 3.x),所以得装 node-sass 4.x

    如果项目中还有 gulp-sass 之类的包,而 gulp-sass 2.x 里面用了 node-sass 3.x,还是会有坑,所以 gulp-sass 得换到 3.x,建议安装 gulp-sass@3.2.1

    四、没有清理缓存

    每次装包失败报错后记得都要 npm uninstall xxx 清除装包错误留下的缓存。

    比如 npm i -D node-sass 报错了,就要执行一遍 npm uninstall node-sass,然后再重新安装。

    常见镜像源设置

    由于国内网络环境或者办公网络环境限制的原因,装 npm 包的时候总是会遇到各种坑,这里分享一些其他的常见 NPM 镜像地址设置:

    $ npm set registry https://registry.npm.taobao.org  # 注册模块镜像
    $ npm set disturl https://npm.taobao.org/dist      # node-gyp 编译依赖的 node 源码镜像
    
    // 以下根据自己需要选择添加
    $ npm config set proxy http://example.com:8080  # 设置代理
    $ npm set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass # node-sass 二进制包镜像
    $ npm i -D node-sass@3.13.1 --sass_binary_path=C:\Users\<username>\Downloads\win32-x64-57_binding.node  // 下载相关的sass_binary 404,强行指定path
    
    $ npm set chromedriver_cdnurl http://cdn.npm.taobao.org/dist/chromedriver # chromedriver 二进制包镜像
    $ npm set operadriver_cdnurl http://cdn.npm.taobao.org/dist/operadriver # operadriver 二进制包镜像
    $ npm set phantomjs_cdnurl http://cdn.npm.taobao.org/dist/phantomjs # phantomjs 二进制包镜像
    $ npm set fse_binary_host_mirror https://npm.taobao.org/mirrors/fsevents # fsevents 二进制包
    $ npm set electron_mirror http://cdn.npm.taobao.org/dist/electron/ # electron 二进制包镜像
    

    结语

    总算把 node-sass 的坑捋清楚了,如果还有其他的坑欢迎大家补充,但愿大家以后都能顺利安装 node-sass,其实也可以用 dart-sass 无缝替换 node-sass 了!dart-sass 兼容 node-sass 的 API,而且安装过程无需下载二进制文件,这样大家就不需要再去踩 node-sass 的坑了,哦不,less 它不香吗?

    参考链接

    • 安装 node-sass 的正确姿势
    • node-sass安装失败的问题汇总
    • 离线安装 node-gyp

    起源地下载网 » 记录安装 node-sass 失败原因及解决办法汇总

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    不错不错,基本上都是我遇到过的问题, node-sass是真坑
    回复(0)

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元