在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
,问题解决!