解决vue中使用scss时，依赖node-sass和sass-loader的版本问题：-程序员宅基地
技术标签： Java EE sass-loader Web前端 vue 前端 node-sass
前言
为什么同样的代码，同样的操作，在他电脑上就能运行出来，在我的电脑上就运行不出来？那有没有考虑版本问题呢！我在学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诸如这种无脑复制执行安装的命令的时候多留心软件或者库文件版本号之间的差异，说不定可以换个版本代码就能跑通了。
当然尝试改版本的过程中有一部分是运气的成分，祝后续开发者在后面碰到版本问题可以一次就找对，项目一次就运行成功！
智能推荐
874计算机科学基础综合,2018年四川大学874计算机科学专业基础综合之计算机操作系统考研仿真模拟五套题...-程序员宅基地
文章浏览阅读1.1k次。一、选择题1． 串行接口是指( )。A. 接口与系统总线之间串行传送，接口与I/0设备之间串行传送B. 接口与系统总线之间串行传送，接口与1/0设备之间并行传送C. 接口与系统总线之间并行传送，接口与I/0设备之间串行传送D. 接口与系统总线之间并行传送，接口与I/0设备之间并行传送【答案】C2． 最容易造成很多小碎片的可变分区分配算法是( )。A. 首次适应算法B. 最佳适应算法..._874 计算机科学专业基础综合题型
XShell连接失败：Could not connect to '192.168.191.128' (port 22): Connection failed._could not connect to '192.168.17.128' (port 22): c-程序员宅基地
文章浏览阅读9.7k次，点赞5次，收藏15次。连接xshell失败，报错如下图，怎么解决呢。1、通过ps -e|grep ssh命令判断是否安装ssh服务2、如果只有客户端安装了，服务器没有安装，则需要安装ssh服务器，命令：apt-get install openssh-server3、安装成功之后，启动ssh服务，命令：/etc/init.d/ssh start4、通过ps -e|grep ssh命令再次判断是否正确启动..._could not connect to '192.168.17.128' (port 22): connection failed.
杰理之KeyPage【篇】_杰理 空白芯片 烧入key文件-程序员宅基地
文章浏览阅读209次。00000000_杰理 空白芯片 烧入key文件
一文读懂ChatGPT，满足你对chatGPT的好奇心_引发对chatgpt兴趣的表述-程序员宅基地
文章浏览阅读475次。2023年初，“ChatGPT”一词在社交媒体上引起了热议，人们纷纷探讨它的本质和对社会的影响。就连央视新闻也对此进行了报道。作为新传专业的前沿人士，我们当然不能忽视这一热点。本文将全面解析ChatGPT，打开“技术黑箱”，探讨它对新闻与传播领域的影响。_引发对chatgpt兴趣的表述
中文字符频率统计python_用Python数据分析方法进行汉字声调频率统计分析-程序员宅基地
文章浏览阅读259次。用Python数据分析方法进行汉字声调频率统计分析木合塔尔·沙地克;布合力齐姑丽·瓦斯力【期刊名称】《电脑知识与技术》【年(卷),期】2017(013)035【摘要】该文首先用Python程序,自动获取基本汉字字符集中的所有汉字,然后用汉字拼音转换工具pypinyin把所有汉字转换成拼音,最后根据所有汉字的拼音声调,统计并可视化拼音声调的占比.【总页数】2页(13-14)【关键词】数据分析;数据可..._汉字声调频率统计
linux输出信息调试信息重定向-程序员宅基地
文章浏览阅读64次。最近在做一个android系统移植的项目，所使用的开发板com1是调试串口，就是说会有uboot和kernel的调试信息打印在com1上（ttySAC0）。因为后期要使用ttySAC0作为上层应用通信串口，所以要把所有的调试信息都给去掉。参考网上的几篇文章，自己做了如下修改，终于把调试信息重定向到ttySAC1上了，在这做下记录。参考文章有：http://blog.csdn.net/longt..._嵌入式rootfs 输出重定向到/dev/console
随便推点
uniapp 引入iconfont图标库彩色symbol教程_uniapp symbol图标-程序员宅基地
文章浏览阅读1.2k次，点赞4次，收藏12次。1，先去iconfont登录，然后选择图标加入购物车 2，点击又上角车车添加进入项目我的项目中就会出现选择的图标 3，点击下载至本地，然后解压文件夹，然后切换到uniapp打开终端运行注：要保证自己电脑有安装node(没有安装node可以去官网下载Node.js 中文网)npm i -g iconfont-tools（mac用户失败的话在前面加个sudo，password就是自己的开机密码吧）4,终端切换到上面解压的文件夹里面，运行iconfont-tools 这些可以默认也可以自己命名（我是自己命名的_uniapp symbol图标
C、C++ 对于char*和char[]的理解_c++ char*-程序员宅基地
文章浏览阅读1.2w次，点赞25次，收藏192次。char*和char[]都是指针，指向第一个字符所在的地址，但char*是常量的指针，char[]是指针的常量_c++ char*
Sublime Text2 使用教程-程序员宅基地
文章浏览阅读930次。代码编辑器或者文本编辑器，对于程序员来说，就像剑与战士一样，谁都想拥有一把可以随心驾驭且锋利无比的宝剑，而每一位程序员，同样会去追求最适合自己的强大、灵活的编辑器，相信你和我一样，都不会例外。我用过的编辑器不少，真不少～ 但却没有哪款让我特别心仪的，直到我遇到了 Sublime Text 2 ！如果说“神器”是我能给予一款软件最高的评价，那么我很乐意为它封上这么一个称号。它小巧绿色且速度非
对10个整数进行按照从小到大的顺序排序用选择法和冒泡排序_对十个数进行大小排序java-程序员宅基地
文章浏览阅读4.1k次。一、选择法这是每一个数出来跟后面所有的进行比较。2.冒泡排序法，是两个相邻的进行对比。_对十个数进行大小排序java
物联网开发笔记——使用网络调试助手连接阿里云物联网平台（基于MQTT协议）_网络调试助手连接阿里云连不上-程序员宅基地
文章浏览阅读2.9k次。物联网开发笔记——使用网络调试助手连接阿里云物联网平台（基于MQTT协议）其实作者本意是使用4G模块来实现与阿里云物联网平台的连接过程，但是由于自己用的4G模块自身的限制，使得阿里云连接总是无法建立，已经联系客服返厂检修了，于是我在此使用网络调试助手来演示如何与阿里云物联网平台建立连接。一.准备工作1.MQTT协议说明文档（3.1.1版本）2.网络调试助手（可使用域名与服务器建立连接）PS：与阿里云建立连解释，最好使用域名来完成连接过程，而不是使用IP号。这里我跟阿里云的售后工程师咨询过，表示对应_网络调试助手连接阿里云连不上
＜＜＜零基础C++速成＞＞＞_无c语言基础c++期末速成-程序员宅基地
文章浏览阅读544次，点赞5次，收藏6次。运算符与表达式任何高级程序设计语言中，表达式都是最基本的组成部分，可以说C++中的大部分语句都是由表达式构成的。_无c语言基础c++期末速成