解决vue中使用scss时，依赖node-sass和sass-loader的版本问题：-程序员宅基地

技术标签： Java EE sass-loader Web前端 vue 前端 node-sass

解决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诸如这种无脑复制执行安装的命令的时候多留心软件或者库文件版本号之间的差异，说不定可以换个版本代码就能跑通了。
当然尝试改版本的过程中有一部分是运气的成分，祝后续开发者在后面碰到版本问题可以一次就找对，项目一次就运行成功！

本文链接：https://blog.csdn.net/qq_38505969/article/details/109788391

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

wxWidgets：常用表达式_wxwidget 正则表达式非数字字符-程序员宅基地

文章浏览阅读282次。wxWidgets：常用表达式wxWidgets：常用表达式不同风味的正则表达式转义Escapes元语法匹配限制和兼容性基本正则表达式正则表达式字符名称wxWidgets：常用表达式一个正则表达式描述字符的字符串。这是一种匹配某些字符串但不匹配其他字符串的模式。不同风味的正则表达式POSIX 定义的正则表达式 (RE) 有两种形式：扩展正则表达式(ERE) 和基本正则表达式(BRE)。ERE 大致是传统egrep 的那些，而 BRE 大致是传统ed 的那些。这个实现增加了第三种风格：高级正则表达式_wxwidget 正则表达式非数字字符

Java中普通for循环和增强for循环的对比_for循环10万数据需要时间-程序员宅基地

文章浏览阅读3.4k次，点赞5次，收藏11次。Java中普通for循环和增强for循环的对比_for循环10万数据需要时间

学习PCB设计前的知识扫盲_pcb端子设计基础知识-程序员宅基地

文章浏览阅读2.7k次，点赞13次，收藏97次。0.工厂制作PCB线路板流程1.PCB的结构铜层阻焊丝印本质(PCB画电路板到底在画什么)基础工艺指标2.PCB图中的元素元素布局布线叠层设计3.PCB的设计依据原理图原理图元件库4.PCB的设计流程——总结_pcb端子设计基础知识

Python读取Excel内容；将读取的数据转换为list类型便于切片处理；列表的操作方法；pandas处理DataFrame类型数据；pandas操作；Python几种取整的方法_pandas excel list-程序员宅基地

文章浏览阅读4.5k次，点赞5次，收藏19次。Python读取Excel内容；将读取的数据转换为list类型便于切片处理；列表的操作方法；pandas处理DataFrame类型数据_pandas excel list

nginx日志与监控，日志分析_nginx的日志分析-程序员宅基地

文章浏览阅读4.6k次。在分析服务器运行情况和业务数据时，nginx日志是非常可靠的数据来源，而掌握常用的nginx日志分析命令的应用技巧则有着事半功倍的作用，可以快速进行定位和统计。下面是自己在分析nginx日志时常用命令的一些总结。1.利用grep ,wc命令统计某个请求或字符串出现的次数比如我要统计GET /task/showContent接口在某天的调用次数，则可以使用如下命令： cat _nginx的日志分析

ECharts--中国地图（无敌详细）_echarts中国地图-程序员宅基地

文章浏览阅读5.4w次，点赞64次，收藏262次。使用Echarts绘制中国地图，其中地图点信息由JSON文件编写，前端html直接从JSON文件中读取地区数据，渲染到前端即可。详细介绍用到的各个功能！代码直接复制运行即可！_echarts中国地图

随便推点

JVM常用调优参数 ——JVM篇_jvm调优-程序员宅基地

文章浏览阅读1.9w次，点赞50次，收藏366次。JVM常用性能调优参数详解在学习完整个JVM内容后，其实目标不仅是学习了解整个JVM的基础知识，而是为了进行JVM性能调优做准备，所以以下的内容就是来说说JVM性能调优的知识。一、性能调优性能调优包含多个层次，比如：架构调优、代码调优、JVM调优、数据库调优、操作系统调优等等。架构调优和代码调优是JVM调优的基础，其中架构调优是对系统影响最大的。性能调优基本上按照以下步骤进行：明确优化目标发现性能瓶颈性能调优通过监控及数据统计工具获得数据确认是否达到目标二、何时进_jvm调优