npm ERR!报错,Vue项目中未安装less,但是要用less写样式,此时安装less后,可能报错的原因及解决办法

在Vue项目中遇到未安装less但需要使用less编写样式时,安装less-loader出现错误。错误源于Vue_CLI的webpack版本较低而less-loader安装的是最新版。解决方法是降级less-loader到与webpack兼容的版本。此外,如果同时安装less和sass,也建议指定低版本以避免报错。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 报错详情

<style lang="less">
</style>

(在css中要使用less语言,此时未安装less-loader,所以使用如下命令安装了less-loader,结果报错了。)

终端命令行: npm i less-loader

在这里插入图片描述

2. 报错原因

Vue的脚手架Vue_CLI依赖于webpack,但webpack版本更新极快,而Vue_CLI中用的不是最新版本的webpack,而是webpack的比较稳定的版本。
此处我们使用“npm i less-loader”下载的是最新版本的less-loader,而最新版本的less-loader完全是为了迎合webpack的最新版本。
所以由于代码中是低版本的webpack和高版本的less-loader,导致报错。

3. 解决办法【标题 4、5可忽略】

  • 不要直接安装less-loader的最新版,而是给less-loader降低1-2个版本来安装。
// 项目根目录终端命令行
	// 安装 less 和 less-loader 依赖
	// 降低less-loader版本
	npm i less@4 less-loader@8
	// 或者
	npm i less@5 less-loader@8

4. 辅助解决报错的其他命令行

  • 查看webpack所有版本的命令:
    // 项目根目录终端输入
	npm view webpack versions
  • 查看less-loader的所有版本的命令:
	// 项目根目录终端输入
	npm view less-loader versions

在这里插入图片描述

  • 当前项目中使用的webpack版本:
以 项目根目录下的node_modules/webpack/package.json 中的  _form  后的版本号为准
  • 卸载less依赖:
// 根目录终端命令行
// 卸载 less 以及 less-loader
	npm uninstall less less-loader  

5. 其他可能报错情况

  • 如果当前vue项目初始化时有安装less,那么此时又需要安装sass,一定要安装低版本
  • 当前vue项目初始化时有安装sass,那么此时又需要安装less,也一定要安装低版本
  • 即要==@版本号指定低版本安装==,直接安装最新版本极大可能会报错。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值