关于vue中引入less时的报错集

原文地址：https://blog.csdn.net/qq_40652539/article/details/93398864?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

在vue中引入并使用less时遇到的一些错误及解决方案：

1、错误一：

错误如下图所示：

因为当前项目版本2.9.6 已经在build/utils里配置了less的处理，所以和之前在build/webpack.base.conf.js中配置的less-loader冲突

解决方法：

将冲突的less-loader去掉即可，如下图：

2、错误一：

错误如下图所示：

此类为题表示缺少相关依赖，根据关键词vue-style-loader!css-loader，说明是css 解析的时候出了问题。

解决方法：

根据使用的css语言来安装相应的依赖包,命令如下：

常规css:

npm install stylus-loader css-loader style-loader --save-dev

如果是less：

npm install less less-loader --save-dev

如果是sass:

npm install sass sass-loader --save-dev

或者：

npm install sass-resources-loader --save-dev(我上面的这个错误是因为引用全局的less文件，所以执行该命令来解决此问题)

3.错误三：

错误如下图所示：

Module build failed: TypeError: loaderContext.getResolve is not a function

原因：

less-loader版本太高

解决方式：

修改package.json文件：

修改less和less-loader的版本为^3.9和^5.0.0, 然后删除node_modules文件夹后重新npm install

卸载，并安装指定版本：

npm uninstall less less-loader

npm install [email protected] [email protected] --save-dev