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,结果如下:

相关推荐
前端小白从0开始33 分钟前
Vue3项目实现WPS文件预览和内容回填功能
前端·javascript·vue.js·html5·wps·文档回填·文档在线预览
難釋懷1 小时前
Vue解决开发环境 Ajax 跨域问题
前端·vue.js·ajax
特立独行的猫a1 小时前
Nuxt.js 中的路由配置详解
开发语言·前端·javascript·路由·nuxt·nuxtjs
咸虾米2 小时前
在uniCloud云对象中定义dbJQL的便捷方法
前端·javascript
梨子同志2 小时前
JavaScript Proxy 和 Reflect
前端·javascript
汤圆炒橘子2 小时前
状态策略模式的优势分析
前端
90后的晨仔2 小时前
解析鸿蒙 ArkTS 中的 Union 类型与 TypeAliases类型
前端·harmonyos
IT_陈寒2 小时前
Element Plus 2.10.0 重磅发布!新增Splitter组件
前端·人工智能·后端
挑战者6668882 小时前
vue入门环境搭建及demo运行
前端·javascript·vue.js
贩卖纯净水.2 小时前
Webpack的基本使用 - babel
前端·webpack·node.js