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

在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

4.错误四：

场景：
配置公共的less文件后，在一个less文件中@import另一个less文件，报如下错误：

虽然我只在一个less文件中引入了另一个less文件，但是，我项目中的所有的vue文件都会报这个错，这是为什么呢？
原因：
通过向别人请教，他 的回答是，我的那种配置方式(vue中使用自定义的公共less文件)中的less-loader，是将所有的less文件拿到了vue文件中，所以会报每个vue文件的错误；至于这种说法对不对，我也不太清楚，但是感觉有点道理；至于为什么报错，我的理解是可能我配置公共less时使用的是相对路径，通过less-loader解析后，通过@import导入的文件的路径无法在解析后的less文件中被识别，所以报错;
解决方法：
经过我的多番研究、百度，终于在多次尝试中找到了正确的解决方式：
首先，在webpack.base.conf.js的resolve中加入.less,这样就可以在less文件中使用下面的路径别名了；

然后重新在less文件中@import另外的less文件，方法为： @import '~@/styles/reset.less';,这里必须在@前加~;

加~后，less-loader会把非根路径的url解析成模块路径，如果不加的话，会解析成相对路径；

5.错误五：

场景：
欲定制iview的主题，引入到项目里报错如下：
Inline JavaScript is not enabled. Is it set in your options?

解决方法：
也尝试过网上的方法，如vue.config.js的配置javascriptEnabled:true，但是没有效果，最后发现有说是less版本的问题，于是我就和view-design/ViewUI的less版本对比了一下，发现我的版本为^3.x.x,最后改成了ViewUI的版本^2.7.3,重新npm i，问题解决！