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

1、错误一:

错误如下图所示:

vue3 less安装 vue安装less报错_css


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

解决方法: 将冲突的less-loader去掉即可,如下图:

vue3 less安装 vue安装less报错_vue3 less安装_02

2、错误一:

错误如下图所示:

vue3 less安装 vue安装less报错_解决方法_03


此类为题表示缺少相关依赖,根据关键词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

vue3 less安装 vue安装less报错_相对路径_04


原因:

less-loader版本太高

解决方式:

修改package.json文件:

vue3 less安装 vue安装less报错_vue3 less安装_05


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

4.错误四:

场景:

配置公共的less文件后,在一个less文件中@import另一个less文件,报如下错误:

vue3 less安装 vue安装less报错_相对路径_06


虽然我只在一个less文件中引入了另一个less文件,但是,我项目中的所有的vue文件都会报这个错,这是为什么呢?

原因:

通过向别人请教,他 的回答是,我的那种配置方式(vue中使用自定义的公共less文件)中的less-loader,是将所有的less文件拿到了vue文件中,所以会报每个vue文件的错误;至于这种说法对不对,我也不太清楚,但是感觉有点道理;至于为什么报错,我的理解是可能我配置公共less时使用的是相对路径,通过less-loader解析后,通过@import导入的文件的路径无法在解析后的less文件中被识别,所以报错;

解决方法:

经过我的多番研究、百度,终于在多次尝试中找到了正确的解决方式:

首先,在webpack.base.conf.jsresolve中加入.less,这样就可以在less文件中使用下面的路径别名了;

vue3 less安装 vue安装less报错_css_07


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

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

5.错误五:

场景:

欲定制iview的主题,引入到项目里报错如下:

Inline JavaScript is not enabled. Is it set in your options?

vue3 less安装 vue安装less报错_vue3 less安装_08


解决方法:

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