解决vue中使用scss时,依赖node-sass和sass-loader的版本问题:

Java EE 同时被 2 个专栏收录
12 篇文章 0 订阅
2 篇文章 0 订阅

解决vue中使用scss时,依赖node-sass和sass-loader的版本问题:

前言

  为什么同样的代码,同样的操作,在他电脑上就能运行出来,在我的电脑上就运行不出来?那有没有考虑版本问题呢!我在学Vue的过程中就被版本问题狠狠地折磨了一次。
  下面我将针对这个node-sass和sass-loader的版本问题,提供一个较为可靠的解决思路,希望能帮助到将来碰到这个问题的朋友。

1、问题引入

  我是一个vue新手,今天在学习vue的时候需要写样式,然后用的是scss语法,在使用之前需要先安装两个依赖node-sass和sass-loader,我是看网上视频教程跟着教程学的,教程里面的老师使用的是下面的指令:

npm install sass-loader node-sass --save-dev

  并且他安装成功了,我看到npm默认给他装的是 sass-loader 7.1.0,node-sass 4.11.0 ,随后他启动了项目,没有报错,样式也成功加载了。我也就照葫芦画瓢,用了这个指令,两个依赖也正常的装上了,npm给我默认装的是sass-loader 10.1.0和node-sass 5.0.0,原来npm不加版本号的话就会默认下载最新版的依赖,教程是18年2月份出的,所以据距今19个月了,这期间这两个依赖都经过了迅速的发展,更新了几个大版本。
  抱着试一试的心态,版本最新就最新吧,说不定也照样能运行呢,可就当我写完css代码,启动项目的时候,却报了如下错误:在这里插入图片描述
  先看看这个报错什么意思(我也是愣了半天):项目编译到20%的时候提示sass-loader包下的js代码有问题,然后又是一通百度搜索,最终确定这就是node-sass和sass-loader的版本太高导致的。于是我首先尝试了 视频教程里面老师用的版本 sass-loader 7.1.0,node-sass 4.11.0,我把版本改成一样的,总能运行了吧。结果却不如人意,npm在下载的过程中去跟站点请求数据的时候报了404错误。纳尼,还有这种事情?我重试了几次之后还是一样的问题。
  我心里想着,不行的话就再换其他版本吧,百度了一番,看了一些博客,一些热心的网友在面对这个问题的时候,给出了他们当时解决问题后,项目正常运行时的版本号。
我试了下面几个版本组合(有些版本没有列出来)。

sass-loader 4.1.1,node-sass 4.3.0
sass-loader 7.0.3,node-sass 4.7.2
sass-loader 7.3.1,node-sass 4.7.2

  结果很不幸,上面几个低版本的库我要不就是装上了依然报各种莫名其妙的错,要不就是请求安装数据的时候报了站点404的错误,然后安装都失败了。
  然后又是各种百度,前前后后又是一个多小时,问题依然没有解决。
终于我在不经意间发现了的npm下载报404错误的站点指向了github,我顺着这个线索在GitHub上找到了官方维护的sass-loader和node-sass的库,官方发了好多个版本,如下图所示。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
  经过观察官方发布这些库的历史版本号可以了解到,官方发布的版本号并不是连续的,有些版本与版本之间跨度比较大,甚至有些版本官方比如 node-sass 4.11.0 这个版本的库还是缺失的(难道是官方删除了?),这就解释了为什么刚才我去使用npm安装的时候会出现站点404异常,对此有疑惑的小伙伴可以去尝试使用npm装下 node-sass 4.11.0。可能之前还能下载到,现在确实被删了,导致下载不到了,太坑了吧。

2、问题解决

  经过试验,我在历史版本库中找到了sass-loader 7.3.1和node-sass 4.14.1,安装成功,然后启动项目,也没有报错,问题完美解决。对应的指令如下,供大家参考。

npm uninstall sass-loader node-sass    //卸载
npm install sass-loader@7.3.1 node-sass@4.14.1  --save-dev  //安装对应的版本

  附上执行成功的截图:
在这里插入图片描述

  如果某一天我给出的版本也解决不了问题,说不定是官方又删除了库文件,不妨去官方的github仓库去寻找合适的版本
  node-sass: https://github.com/sass/node-sass/tags
  sass-loader: https://github.com/webpack-contrib/sass-loader/tags

3、总结:

  以后再碰到npm install sass-loader node-sass --save-dev诸如这种无脑复制执行安装的命令的时候多留心软件或者库文件版本号之间的差异,说不定可以换个版本代码就能跑通了。
  当然尝试改版本的过程中有一部分是运气的成分,祝后续开发者在后面碰到版本问题可以一次就找对,项目一次就运行成功!

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页

打赏

糖果墙

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值