2021/02/22 vue项目安装node-sass、sass-loader报错记录

  • 背景:用vue 脚手架新建了个项目,打算用scss写样式,第一次用,就一直报错一直报错。
  • 快捷通道
    如果不想看多个报错原因的,可以直接卸载安装好的node-sass和sass-loader,然后安装 “node-sass”: “^4.14.1”, “sass-loader”: “^7.3.1”,运行项目试试。看最后总结。
  • 报错1:Failed to resolve loader: sass-loader
    –意思是项目没有安装sass-loader插件
    –按以下图片方法直接安装,运行报错
    安装sass-loader插件

  • 报错2:Syntax Error: TypeError: this.getOptions is not a function
    –按上图安装的都是最新版的
    Syntax Error: TypeError: this.getOptions is not a function
    –原因:可能是saas-loader安装的版本太高
    –卸载saas-loader,重新安装低版本7.3.1,如果版本7.3.1不行可以安装6.X 参考这里

卸载sass-loader

npm uninstall --save sass-loader

安装sass-loader指定版本

npm install -D saas-loader@7.3.1

–运行项目,又报错


  • 报错3:npm ERR! Failed at the node-sass@5.0.0 postinstall script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    –原因 应该是node-sass的问题
    –解决方法 把sass-loader 、node-sass都删掉,先安装sass-loader 再安装node-sas。(这里不知道为什么,看网上的反正按这个顺序做)

卸载sass-loader

npm uninstall sass-loader

卸载node-sass

npm uninstall node-sass

重新安装scss-loader的版本 安装7.3.1版本

npm install sass-loader@7.3.1 --save-dev

安装node-sass

npm install --save-dev node-sass

–运行 继续报错


  • 报错4: Syntax Error: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
    –原因 参考
    因为Error:Node Sass version 5.0.0 is incompatible with ^4.x 问题,此错误来自sass-loader.因为node-sass@latest为v5.0.0,而sass-loader期望值为^4.0.0,当不加版本号时默认会下载最新版(即5.0.0版本)
    –解决方法 卸载node-sass ,用以下指令
npm i node-sass@4.14.1 --sass_binary_site=https://npm.taobao.org/mir
rors/node-sass/

–好家伙,又报错了


  • 报错5: Error: node-sass@4.14.1 postinstall: node scripts/build.js
    –原因 网速不好,sass版本太高 参考
     Error: node-sass@4.14.1 postinstall:
    –按照上图方法来,我以为是淘宝镜像的问题,反正没有成功
    最终解决方法
    卸载node-sass,用以下指令重新安装,两种都可以,一个留在package.json里了,一个没有
npm i node-sass@4.14.1 --sass_binary_site=https://npm.taobao.org/mirrors/node-sass

这个指令用cnpm安装更快

npm i --save-dev node-sass@4.14.1 --sass_binary_site=https://npm.taobao.org/mirrors/node-sass

  • 总结
    –1.先安装sass-loader ,再安装node-sass(没有再测试顺序了,不想弄了,反正我是这个顺序成功的)
    –2.sass-loader安装7.3.1,node-sass安装4.14.1
    –3.如果遇到报错Error: node-sass@4.14.1 postinstall: node scripts/build.js,直接卸载node-sas用‘报错5’里面的两个指令来
  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值