在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文件:
在这里插入图片描述
修改lessless-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.jsresolve中加入.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/ViewUIless版本对比了一下,发现我的版本为^3.x.x,最后改成了ViewUI的版本^2.7.3,重新npm i,问题解决!

Logo

前往低代码交流专区

更多推荐