解决Vue启动失败报错：Module not found: Error: Can‘t resolve ‘less-loader‘

女爷i 2023-09-23 23:18 12阅读 0赞

## 问题描述 ##

今天想在网上找一个好看的登录页面，把别人的代码引入进来之后，发现项目编译不了，并且报错了：

> Module not found: Error: Can’t resolve ‘less-loader’

![在这里插入图片描述][a2f02baea11946ae92c9c4c254316117.png]

## 分析问题 ##

从错误的日志就可以看出来，是缺少了less-loader这个依赖，但是我们又在项目中使用了(引用了)Sass语法，就会保一下错误

![在这里插入图片描述][a7e7ddbb93d3467c817e8f3ab0ecacdd.png]

实际上是组件中的样式里加了这么个代码

比如这里：

![在这里插入图片描述][83b9ed1d82c9477680809851ecb94fd0.png]

## 科普：什么是less-loader ##

简单来说：

> webpack 将 Less 编译为 CSS 的 loader。

## 解决问题：安装less插件 ##

而这个less是需要安装的，直接执行命令:

npm install --save-dev less-loader less

这个包很小，下载起来很快的:

![在这里插入图片描述][e5a5e7c705be46d78fb40733df4d79b5.png]

这是他npm的地址

> https://www.npmjs.com/package/less-loader

注意：如果less直接安装，会自动安装为最新版本，可能会导致项目无法启动，所以要根据自己的vue版本选择less适用的版本

下载完成之后再次启动项目即可：

![在这里插入图片描述][daac4a401de1451482572bbcedb72e07.png]

![在这里插入图片描述][237289e0d2ae4ffca054a7cdcc75aac5.png]

## 总结 ##

这种错误还是比较容易发现和解决的，解决类似的问题通常有一个技巧：

> 但凡只要遇到 Module not found:Error:Can\`t resolve ‘XXXXXXXXXXXX’，都是项目中没有安装这个依赖。 只需要执行 ： npm install XXXXXX 就能解决问题。

[a2f02baea11946ae92c9c4c254316117.png]: https://img-blog.csdnimg.cn/a2f02baea11946ae92c9c4c254316117.png
[a7e7ddbb93d3467c817e8f3ab0ecacdd.png]: https://img-blog.csdnimg.cn/a7e7ddbb93d3467c817e8f3ab0ecacdd.png
[83b9ed1d82c9477680809851ecb94fd0.png]: https://img-blog.csdnimg.cn/83b9ed1d82c9477680809851ecb94fd0.png
[e5a5e7c705be46d78fb40733df4d79b5.png]: https://img-blog.csdnimg.cn/e5a5e7c705be46d78fb40733df4d79b5.png
[daac4a401de1451482572bbcedb72e07.png]: https://img-blog.csdnimg.cn/daac4a401de1451482572bbcedb72e07.png
[237289e0d2ae4ffca054a7cdcc75aac5.png]: https://img-blog.csdnimg.cn/237289e0d2ae4ffca054a7cdcc75aac5.png