NuxtJs安装Sass后出现ERROR:Cannot find module ‘webpack/lib/RuleSet‘

最近了解NuxtJs时,发现问题比较多,对于初学者来说是件比较头痛的事。这次是安装sass预处理器,通过命令安装后,出现了ERROR:Cannot find module 'webpack/lib/RuleSet' 错误,于是根据之前经验,对版本进行分析修改版本。

sass安装代码:

javascript 复制代码
npm install --save-dev node-sass sass-loader

安装后出现以下错误,如下图:

一、修复版本

于是从版本入手,查看适应于当前环境的node-sass和sass-loader版本。

node-sass的版本地址:

https://github.com/sass/node-sass/releases

sass-loader的版本地址:

https://github.com/webpack-contrib/sass-loader/releases

我的node版本环境:

javascript 复制代码
D:\workspace\web\nuxtjs>create-nuxt-app -v
create-nuxt-app/2.15.0 win32-x64 node-v16.20.2

由于当前node为v16.20.2,于是node-sass根据releases提示支持的版本,选择了6.0.1:

通过以上地址查询到适应的版本进行安装,代码如下:

javascript 复制代码
npm install [email protected] [email protected] --save-dev

二、根据WARN提示修复

但是安装成功后,还是出现同样问题。这时仔细阅读出错位置英文提示,则会发现经常忽略WARN部分,已提示需要安装的版本号,如下图:

如"[email protected] is installed but ^4.46.0 is expected"意思是"已安装[email protected],但希望安装^4.46.0"。

所以现在我们根据上面提示版本号进行安装,再来看看运行结果,代码如下:

javascript 复制代码
// 安装sass-loader
npm install [email protected] --save-dev

// 安装webpack
npm install [email protected] --save-dev

安装成功后再执行npm run dev,结果如下:

相关推荐
麻芝汤圆9 分钟前
MapReduce 入门实战:WordCount 程序
大数据·前端·javascript·ajax·spark·mapreduce
juruiyuan1112 小时前
FFmpeg3.4 libavcodec协议框架增加新的decode协议
前端
读心悦2 小时前
CSS结构性伪类、UI伪类与动态伪类全解析:从文档结构到交互状态的精准选择
css·ui·交互
Vone_662 小时前
node.js 邮箱验证服务器搭建
运维·服务器·node.js
Peter 谭2 小时前
React Hooks 实现原理深度解析:从基础到源码级理解
前端·javascript·react.js·前端框架·ecmascript
程序员拂雨3 小时前
HTTP和HTTPS模块
http·https·node.js
LuckyLay4 小时前
React百日学习计划——Deepseek版
前端·学习·react.js
gxn_mmf4 小时前
典籍知识问答重新生成和消息修改Bug修改
前端·bug
hj10434 小时前
【fastadmin开发实战】在前端页面中使用bootstraptable以及表格中实现文件上传
前端
乌夷4 小时前
axios结合AbortController取消文件上传
开发语言·前端·javascript