Vue安装sass-loader和node-sass版本匹配的报错问题

 更新时间:2024年04月03日 10:15:10   作者:喜鹊.  
这篇文章主要介绍了Vue安装sass-loader和node-sass版本匹配的报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

Vue安装sass-loader和node-sass版本匹配报错

最近一周没有更新博客是由于手头有点布置的项目,每天比较忙过的也很充足,基本时间安排的满满的

今天休息天就去外面跑了跑歩把一周的压印都释放了出去,瞬间感觉心情开朗了很多

晚上回来头脑感觉比较清晰就把以前遇到过的一个Bug以及解决思路通过复盘给大家分享一下

接下来步入正题

我们在写vue项目的时候有时候大家会用到scss这时候就需要安装依赖sass-loader和node-sass,但是这俩个安装是十分坑爹的,它们俩会由于这个版本匹配冲突的原因导致运行报错,当时我在这个坑中踩了好久,接下来我把报错代码献上(图文结合方便大家理解)

我这个vue项目已经默认安装了 vue-style-loader,不要多此一举。免得版本冲突。

到时候又会出现更多问题。 

第二种报错原因是可能会存在的:就是直接安装也会安装最新版本的

npm install node-sass --save-dev //安装node-sass
npm install sass-loader --save-dev //安装sass-loader

安装完成后就会运行就会报错附上报错图

网上说是因为sass-loader安装的版本太高,卸载重新安装低版本即可,网上大部分都是安装的7的版本,我装的是7.3.1

解决方法

很简单如果你是我上面那种安装方式之一而且正好报错的话请用我接下来献上的解决方法

先卸载之前的sass-loader node-sass版本 

npm uninstall sass-loader
npm uninstall node-sass -D

然后重新装7.3.1 sass-loader的版本 由于sass-loader期望的node-sass值为^4.0.0:所以我们满足他这个小小的愿望,安装sass-loader@7.3.1和node-sass@4.13.1版本

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

然后呢就大功告成了,直接运行成功有没有很简单

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。

相关文章

  • vue elementUI表格控制显示隐藏对应列的方法

    vue elementUI表格控制显示隐藏对应列的方法

    这篇文章主要为大家详细介绍了vue elementUI表格控制显示隐藏对应列的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue运行环境搭建全过程

    vue运行环境搭建全过程

    这篇文章主要介绍了vue运行环境搭建全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • Vue electron前端开启局域网接口实现流程详细介绍

    Vue electron前端开启局域网接口实现流程详细介绍

    用electron写了一个自己用的小软件,无后端,纯本地的数据。最近想着开发一个手机端app,将PC端的数据进行同步。为了这小小的功能单独写个后端又麻烦。干脆前后端不分离哈哈,直接在前端软件中开启接口
    2022-10-10
  • vue各种事件监听实例(小结)

    vue各种事件监听实例(小结)

    这篇文章主要介绍了vue各种事件监听实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue使用stompjs实现mqtt消息推送通知

    vue使用stompjs实现mqtt消息推送通知

    这篇文章主要为大家详细介绍了vue中使用stompjs实现mqtt消息推送通知,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • vue项目中使用vue-i18n报错的解决方法

    vue项目中使用vue-i18n报错的解决方法

    这篇文章主要给大家介绍了关于vue项目中使用vue-i18n报错的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • vue后台管理添加多语言功能的实现示例

    vue后台管理添加多语言功能的实现示例

    这篇文章主要介绍了vue后台管理添加多语言功能的实现示例,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • Vue3项目的3种创建方式代码示例

    Vue3项目的3种创建方式代码示例

    使用VUE3开发很久了,但一直没进行总结和记录,忙里偷闲整理搭建一套VUE3项目,正好记录一下,这篇文章主要给大家介绍了关于Vue3项目的3种创建方式,需要的朋友可以参考下
    2024-03-03
  • Vue.js directive自定义指令详解

    Vue.js directive自定义指令详解

    这篇文章主要介绍了Vue.js directive自定义指令详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • 在Vue开发过程中解决和预防内存泄漏问题的方法详解

    在Vue开发过程中解决和预防内存泄漏问题的方法详解

    Vue作为一款流行的前端框架,已经在许多项目中得到广泛应用,然而,随着我们在Vue中构建更大规模的应用程序,我们可能会遇到一个严重的问题,那就是内存泄漏,因此,我们需要认识到在Vue开发过程中,内存泄漏问题的重要性,本文将给大家介绍如何解决和预防内存泄漏问题
    2023-10-10

最新评论

?


http://www.vxiaotou.com