vue项目用命令安装less-loader后报错解决办法
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,也一定要安装低版本。
- 即要==@版本号指定低版本安装==,直接安装最新版本极大可能会报错。