vue安装node-sass和sass-loader报错问题的解决办法

 更新时间:2023年01月24日 10:38:31   作者:土土杰  
这篇文章主要给大家介绍了关于vue安装node-sass和sass-loader报错问题的解决办法,文中通过图文以及示例代码将解决的方法介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

可行版本(针对 node 16+ 版本)

不想浪费时间看的,可直接去尝试

npm install node-sass@6.0.1 -D
npm install sass-loader@10.2.0 -D

问题描述

问题描述:在进行一个vue项目练习时需要导入node-sass、sass-loader这两个依赖,书本提供代码是npm install sass-loader@7.2.x node-sass@4.12.x - 尝试n次也无法成功执行。

报错:

于是上网查找问题解决得方法,经过数小时得尝试最终解决,以下是总结出的经验教训。

解决方法

1、首先执行以下代码,卸载老版node-sass、sass-loader(因为你有可能安装上了其中一个,但另一个安装不了)

npm uninstall sass-loader node-sass

2、查找与自己node版本对应得node-sass版本,并且要先安装node-sass,再去找匹配的sass-loader,这一点非常重要,我就是被这个坑住了

如何查看自己的node版本号呢?进入终端输入指令

node -v

版本对照表:

image-20221029073637836

你也可以进入github自行查看Releases · sass/node-sass (github.com)

比如我的node版本号是 v16.17.0,我就成功安装了"node-sass": "^6.0.1"版本,执行以下代码安装node-sass

npm install node-sass@6.0.1 -D

3、安装sass-loader

最后安装sass-loader,适合的版本可以直接到网上去搜索,比如我一开始找到的版本是 10.0.1 然后还是安装失败,最后换成 10.2.0 安装成功

npm install sass-loader@10.2.0 -D

最后希望我的尝试能帮助你解决问题!!!

补充知识:解决启动VUE项目时报node-sass不能运行问题

问题现象:clone下来的代码,安装依赖后,启动项目时,报node-sass什么无法当前window环境啥的,需要执行npn rebuild node-sass的错误信息。看了网上一堆方法什么uninstall 然后install,不管用,直接npn rebuild node-sass也是不成功,貌似报什么没有找到Python,不知道什么鬼。

解决方案:最后找到个方法,先执行npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

然后再npm rebuild node-sass,解决。

总结

到此这篇关于vue安装node-sass和sass-loader报错问题解决的文章就介绍到这了,更多相关vue安装node-sass sass-loader报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip

    VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip

    这篇文章主要介绍了VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • VUE +Element 实现多个字段值拼接功能

    VUE +Element 实现多个字段值拼接功能

    这篇文章主要介绍了VUE +Element 实现多个字段值拼接,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • 如何利用vue3实现放大镜效果实例详解

    如何利用vue3实现放大镜效果实例详解

    最近有项目需要用到对图片进行局部放大,类似淘宝商品页的放大镜效果,经过一番研究功能可用,下面这篇文章主要给大家介绍了关于如何利用vue3实现放大镜效果的相关资料,需要的朋友可以参考下
    2021-09-09
  • 使用vue制作探探滑动堆叠组件的实例代码

    使用vue制作探探滑动堆叠组件的实例代码

    探探的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组件,感兴趣的朋友一起看看吧
    2018-03-03
  • 深入理解Vue 单向数据流的原理

    深入理解Vue 单向数据流的原理

    这篇文章主要介绍了深入理解Vue 单向数据流的原理,详细的介绍了Vue 单向数据流的原理和使用,具有一定的参考价值,有兴趣的可以了解一下
    2017-11-11
  • vant van-list下拉加载更多onload事件问题

    vant van-list下拉加载更多onload事件问题

    这篇文章主要介绍了vant van-list下拉加载更多onload事件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue vite之LogicFlow安装核心依赖及项目初始化详解

    vue vite之LogicFlow安装核心依赖及项目初始化详解

    这篇文章主要为大家介绍了vue vite之LogicFlow安装核心依赖及项目初始化详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • react+ ts vite搭建及二次封装请求的过程解析

    react+ ts vite搭建及二次封装请求的过程解析

    这篇文章主要介绍了react+ ts vite搭建及二次封装请求,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue对象拷贝,解决由于引用赋值修改原对象的方式

    vue对象拷贝,解决由于引用赋值修改原对象的方式

    这篇文章主要介绍了vue对象拷贝,解决由于引用赋值修改原对象的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 在Vue3中实现拖拽文件上传功能的过程详解

    在Vue3中实现拖拽文件上传功能的过程详解

    文件上传是我们在开发Web应用时经常遇到的功能之一,为了提升用户体验,我们可以利用HTML5的拖放API来实现拖拽文件上传的功能,本文将介绍如何在Vue3中实现这一功能,文中有详细的代码示例供大家参考,需要的朋友可以参考下
    2023-12-12

最新评论