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

目录
  • 可行版本（针对 node 16+ 版本）
  • 问题描述
  • 解决方法
  • 补充知识：解决启动VUE项目时报node-sass不能运行问题
  • 总结

可行版本（针对 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

版本对照表：

你也可以进入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报错内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • node-sass安装失败解决方法总结(终有一款适合你)

    目录 前言 解决方法一:使用淘宝镜像源(推荐) 解决方法二:使用 cnpm 解决方法三:创建.npmrc文件 解决方法四:下载 .node 到本地 如果这个 .node 还不能解决用这个方法.直接搞定. 解决方法五:使用梯子 来源 解决办法三,重新配置node-sass 缓存! 解决办法 操作步骤 总结 前言 项目中常常遇到node-sass安装失败,动不动就是报各种错误.以前我一次也没有失败过,自从系统重装我的天呀,node-sass就没有成功过,我能做的node卸载,sass重装各种版,以及

  • node-sass安装失败的原因与解决方法

    前言 我们一般在利用npm 安装 node-sass 依赖时,会从 github.com 上下载 .node 文件.由于国内网络环境的问题,这个下载时间可能会很长,甚至导致超时失败. 这是使用 sass 的同学可能都会遇到的郁闷的问题. 解决方案就是使用其他源,或者使用工具下载,然后将安装源指定到本地. 解决方法一:使用淘宝镜像源 设置变量 sass_binary_site,指向淘宝镜像地址.示例: npm i node-sass --sass_binary_site=https://npm.t

  • 解决node-sass偶尔安装失败的方法小结

    最近把Node从4.4.4升级到6.9.1版本,但是在执行npm i命令安装三方依赖包的时候出现了node-sass模块安装失败的问题. 现在和大家分享下如何解决这个问题的方法 分析原因 Cannot download "https://hithub.com/sass/node-sass/releases/download/v3.13.0/win32-x64-46_binding.node" 从上图第九行代码可以看出,导致node-sass安装失败的原因是因为无法下载.node文件,解

  • 整理 node-sass 安装失败的原因及解决办法(小结)

    npm install 时偶尔遇到报错:没有安装python或node-sass 安装失败的问题,百度之后发现是被墙了,但根据百度的方法换了淘宝镜像和用了vpn都安装失败,最后发现原来是因为没有卸载之前安装失败的包导致的.作者本人最后的解决方案是npm uninstall node-sass,然后使用VPN重新安装了一遍就成功了.不能翻墙的同学请看下文 node-sass 安装失败的原因 npm 安装 node-sass 依赖时,会从 github.com 上下载 .node 文件.由于国内网络

  • Vue安装依赖npm install时的报错问题及解决

    Vue安装依赖npm install时的报错问题及解决

    目录 安装依赖npm install时的报错 cnpm安装依赖出现各种问题 问题 解决方案 安装依赖npm install时的报错 1.vue的安装依赖于node.js,要确保你的计算机上已安装过node.js.可进入cmd编辑器,输入命令 node -v进行查看.出现版本信息即成功!没有则从浏览器上面下载安装即可,没有安装要求! 2.确定node安装后,就可以开始vue的安装了.用$ npm install -g vue-cli进行安装,输入vue -V,出现版本信息即成功! 3.建一个Vue

  • MySQL5.7 group by新特性报错1055的解决办法

    项目中本来使用的是mysql5.6进行开发,切换到5.7之后,突然发现原来的一些sql运行都报错,错误编码1055,错误信息和sql_mode中的"only_full_group_by"有关,到网上看了原因,说是mysql5.7中only_full_group_by这个模式是默认开启的 解决办法大致有两种: 一:在sql查询语句中不需要group by的字段上使用any_value()函数 当然,这种对于已经开发了不少功能的项目不太合适,毕竟要把原来的sql都给修改一遍 二:修改my.

  • python 服务器运行代码报错ModuleNotFoundError的解决办法

    一.问题描述 一段 Python 代码在本地的 IDE 上运行正常,部署到服务器运行后,出现了 ModuleNotFoundError: No module named 'xxx' 错误. 二.问题原因 在代码中引入了其他文件的包(自己写的包,非 pip 安装的),问题出在 import 那行语句. 错误的原因是因为路径的原因,服务器端的路径和我们本地的路径不一样显示. 三.解决示例 要解决这个问题,可以在自己代码的顶端加入以下代码: import sys import os sys.path.

  • Oracle+Mybatis的foreach insert批量插入报错的快速解决办法

    最近做一个批量导入的需求,将多条记录批量插入数据库中. 解决思路:在程序中封装一个List集合对象,然后把该集合中的实体插入到数据库中,因为项目使用了MyBatis,所以打算使用MyBatis的foreach功能进行批量插入.期间遇到了"SQL 命令未正确结束 "的错误,最终解决,记录下来供以后查阅和学习. 首先,在网上参考了有关Mybatis的foreach insert的资料,具体如下: foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach

  • nginx上传文件大小报错500的解决办法

    nginx上传文件大小报错500的解决办法 采用nginx作反向代理,出现了一个诡异的问题,小文件可以提交,大文件会报500内部错误.这个是什么原因导致的呢? 查wiki可知,上传文件大小相关的有三个配置 client_body_buffer_size 配置请求体缓存区大小, 不配的话, client_body_temp_path 设置临时文件存放路径.只有当上传的请求体超出缓存区大小时,才会写到临时文件中 client_max_body_size 设置上传文件的最大值 所以查出来,问题出现的原

  • Vue使用Echarts图表多次初始化报错问题的解决方法

    Vue使用Echarts图表多次初始化报错问题的解决方法

    目录 问题 方法一 销毁实例 方法二 不要频繁创建实例 总结 问题 Vue项目中需要用Echarts的柱状图显示数据,并且每次搜索要更新柱状图. 这时候小编发现在控制台会出现这样的报错: 原来的代码是这样的,页面挂载和搜索时都会调用init方法 initChart (dataSet = [5, 20, 36, 10, 10, 20]) { this.barChart = echarts.init(this.$refs.chartBox) const option = { title: { tex

  • Python报错:ModuleNotFoundError的解决办法

    Python报错:ModuleNotFoundError的解决办法

    目录 前言: 正文: 1.pip install requests: 2.PyCharm里面安装软件包: 最后: 前言: 大家都知道python项目中需要导入各种包(这里的包引鉴于java中的),官话来讲就是Module. 而什么又是Module呢,通俗来讲就是一个模块,当然模块这个意思百度搜索一下都能出来,Python 模块(Module),是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义和Python语句.而Mudule的优点,像可维护性.复用.效率等的就不用再赘

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

    目录 可行版本(针对 node 16+ 版本) 问题描述 解决方法 补充知识:解决启动VUE项目时报node-sass不能运行问题 总结 可行版本(针对 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-l

  • vue关于eslint空格缩进等的报错问题及解决

    vue关于eslint空格缩进等的报错问题及解决

    目录 关于eslint空格缩进等的报错问题 解决办法有四种 eslint使用规则和各种报错对应规则 ESLint 主要有以下特点 关于eslint空格缩进等的报错问题 解决办法有四种 1. 在.eslintrc.js文件中添加如下代码: rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production'

  • npm install安装过程报错的实用解决办法

    npm install安装过程报错的实用解决办法

    项目拷到本地,然后cd进入项目目录,npm install安装,报错了,尝试的方法可以有: 首先确定自己使用的包的下载源是国内的(可以通过npm config list查看自己包的下载源,如果是默认官方的话,建议改成国内的,方法:npm config set registry https://registry.npm.taobao.org),不存在因为网络导致依赖包下载缓慢的安装失败问题,如果遇到安装一半卡住不动的小伙伴可以尝试一下这种方法 接着npm install 报错的话,建议可以使用这个

随机推荐