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 + Tippy.js打造高定制浮层提示组件(Tooltip/Popover)

    使用Vue + Tippy.js打造高定制浮层提示组件(Tooltip/Popover)

    这篇文章主要介绍了使用Vue + Tippy.js打造高定制浮层提示组件(Tooltip/Popover)的相关资料,支持延迟显示、手动控制、响应式内容及图片图标等功能,适用于Tooltip、Popover、关键词推荐等场景,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-07-07
  • vue-cli项目中怎么使用mock数据

    vue-cli项目中怎么使用mock数据

    本篇文章主要介绍了vue-cli项目中怎么使用mock数据 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue中使用this.$set()如何新增数据,更新视图

    Vue中使用this.$set()如何新增数据,更新视图

    这篇文章主要介绍了Vue中使用this.$set()实现新增数据,更新视图方式。具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue中使用/deep/失效的解决方法

    vue中使用/deep/失效的解决方法

    这篇文章主要介绍了vue中使用/deep/失效的解决办法,使用了css预处理器,则可以使用/deep/, 如果/deep/ 无效,则使用 ::v-deep,本文给大家讲解的非常详细需要的朋友可以参考下
    2022-11-11
  • 详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式

    详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式

    这篇文章主要介绍了详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • vue elementui select标签监听change事件失效问题

    vue elementui select标签监听change事件失效问题

    这篇文章主要介绍了vue elementui select标签监听change事件失效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • vue如何自动化打包测试环境和正式环境的dist/test文件

    vue如何自动化打包测试环境和正式环境的dist/test文件

    这篇文章主要介绍了vue如何自动化打包测试环境和正式环境的dist/test文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • Vue中四种操作dom方法保姆级讲解

    Vue中四种操作dom方法保姆级讲解

    这篇文章主要介绍了Vue中四种操作dom方法,首先,在vue中强烈禁用原生与jquery来操作DOM元素。我们要充分的利用vue的优势:MVVM,在vue中程序员几乎不操作DOM,只需要维护好数据即可,vue给程序员提供ref引用,不调用api直接获取元素组件的使用
    2023-02-02
  • Vue3封装全局自定义指令实现按钮权限控制功能实例

    Vue3封装全局自定义指令实现按钮权限控制功能实例

    在Vue应用中自定义指令是一种强大的功能,可以用于封装DOM操作逻辑,这篇文章主要介绍了Vue3封装全局自定义指令实现按钮权限控制功能的相关资料,需要的朋友可以参考下
    2025-07-07
  • 一文彻底搞懂Vue中scoped和/deep/原理

    一文彻底搞懂Vue中scoped和/deep/原理

    在Vue中,有两种常用的CSS选择器,用于修改组件样式:scoped 和 /deep/(或 ::v-deep),它们都是为了实现样式的作用域,本文小编就来分别给大家介绍一下这两种选择器的原理,需要的朋友可以参考下
    2023-08-08

最新评论