基于vue-cli的less的安装和配置 使用 以及 解决less-loader版本过高问题 ---- 超简单篇

vscode篇

已存在vue脚手架项目
打开vscode
按住ctrl键 + ~ 键 打开调试终端

方法一：npm安装less和less-loader

npm install less --save-dev
//这里需要指定版本，不能太高，如果太高后续容易报错。后面解答报错问题
npm install less-loader@6.0.0 --save-dev

方法二： 在调试终端中输入vue ui

在已存在的项目的依赖中点击“安装依赖”---->在运行依赖中搜索：less 和less-loader

注意：这种方式安装的less-loader是最高版本，后续可能会出现版本过高问题，文章最后我会提到解决方法

如何使用less

接下来在app.vue的style标签中加上lang="less"即可使用less。

一种是： 在app的style中直接写样式，一旦样式太多就显得杂乱无章（这样太过冗余，不建议）

 @colors: #aa8866;
 #app {
   margin: auto;
  .less-test{
    background-color: @colors;
  }
}

另一种是： 写一个样式less文件在app.vue的style中引入该样式文件，建议使用这种引入式

// 引入less样式
@import url('../src/assets/testLess.less');

在testless.less的文件中

@height:100px;
@width:200px;
.box{
    height: @height;
    width: @width;
}

解决问题篇

我刚开始的时候前边正常安装less和less-loader，只有在app.vue页面添加lang="less"的时候会报错
问题：

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

原因：less-loader版本过高
解决方法:
1.卸载原来版本的less-loader：npm uninstall less-loader
2.安装指定版本（低版本）的 less-loader：npm install less-loader@5.0.0 --save

后续还会添加hbuilderx的相关less的安装、配置和使用，请继续关注！
！未完结 ！