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

 更新时间:2024年04月03日 10:15:10   作者:喜鹊.  
这篇文章主要介绍了Vue安装sass-loader和node-sass版本匹配的报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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 ui的安装步骤以及使用详解

    vue ui的安装步骤以及使用详解

    最近公司开发一个项目,采用的前后端分离的方式,前端采用vue,但是再项目开发过程中遇到一个比较麻烦的问题,下面这篇文章主要给大家介绍了关于vue ui的安装步骤以及使用的相关资料,需要的朋友可以参考下
    2022-08-08
  • 在Vue中使用scoped属性实现样式隔离的原因解析

    在Vue中使用scoped属性实现样式隔离的原因解析

    scoped是Vue的一个特殊属性,可以应用于<style>标签中的样式,这篇文章给大家介绍在Vue中,使用scoped属性为什么可以实现样式隔离,感兴趣的朋友一起看看吧
    2023-12-12
  • Vue如何清空对象

    Vue如何清空对象

    这篇文章主要介绍了Vue如何清空对象,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 利用vueJs实现图片轮播实例代码

    利用vueJs实现图片轮播实例代码

    本篇文章主要介绍了利用vueJs实现图片轮播实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 解决vue创建项目使用vue-router和vuex报错Object(...)is not a function

    解决vue创建项目使用vue-router和vuex报错Object(...)is not a&nb

    这篇文章主要介绍了解决vue创建项目使用vue-router和vuex报错Object(...)is not a function问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • jenkins自动构建发布vue项目的方法步骤

    jenkins自动构建发布vue项目的方法步骤

    这篇文章主要介绍了jenkins自动构建发布vue项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • vue的webcamjs集成方式

    vue的webcamjs集成方式

    这篇文章主要介绍了vue的webcamjs集成方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue3 computed初始化获取设置值实现示例

    Vue3 computed初始化获取设置值实现示例

    这篇文章主要为大家介绍了Vue3 computed初始化以及获取值设置值实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • vue实现选项卡功能

    vue实现选项卡功能

    这篇文章主要为大家详细介绍了vue实现选项卡功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 详解vue-cil和webpack中本地静态图片的路径问题解决方案

    详解vue-cil和webpack中本地静态图片的路径问题解决方案

    这篇文章主要介绍了详解vue-cil和webpack中本地静态图片的路径问题解决方案,非常具有实用价值,需要的朋友可以参考下
    2017-09-09

最新评论