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

最新推荐文章于 2024-06-17 02:23:22 发布

Boo_crob

最新推荐文章于 2024-06-17 02:23:22 发布

阅读量3.6k

点赞数 1

分类专栏： less

本文链接：https://blog.csdn.net/Boo_crob/article/details/118103772

版权

1 篇文章 0 订阅

订阅专栏

vscode篇

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

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

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

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

接下来在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的安装、配置和使用，请继续关注！
！未完结！

关注