vue3 使用 lessvar变量

清晨的☀

前言

我们都知道在 Vue 中并不只有纯正的CSS,还有less、sass等，后面这些，写起来都可以级联着，不需要像原生的css那样，会方便很多。

大家都知道我也是最近写的vue，看见周围人都在用这个，我也就去安装了一下，但是一直都报一个版本过高的错误。这种错误非常好解决，因为后端也常遇到，直接降版本就好了。

因为好奇心的驱使，我就在想，为什么不能安装最新less-loader？好像也没有哪里体现啊

然后就产生了这篇文章…

一、踩坑开始

我目前项目是没有安装的，我们先把<style lang="less"> 改成less，这个时候控制台就会报这样的错误。

这很简单，说让我们下载less-loader，下载就是拉吗

npm i less-loader

这样就直接下载完， 我们再次启动项目。

接着报如下错误：

拿着这个去百度，答案到处都是，但是基本没人去讲为什么我们安装了默认的less-loader会报这个错误。

二、原因

首先我们要明白一件事情，vue的脚手架是依靠着webpack的，我们默认是使用webpacke来对vue项目进行打包管理的。

目前webpack的最新版本已经到五拉。

而我们使用的vue的脚手架目前使用的webpack版本还是4.多的

我们可以去哪里查看呢？打开node_modules，找到webpack文件夹，看package.json文件，查看内置的版本信息

在这个里面是可以直接看到它搭配的less和less-loader的。

我们可以直接下载这个搭配的版本使用,后面的版本号，

其实less-loader版本从4~7都行，现在最新的都到10拉，只不过新的8，9，10都是搭配webpack5使用的。

npm install less@3.9.0 less-loader@4.0.3

再次启动项目，没有任何问题。

---

对了在这个地方不要产生一个误解，说一定要使用什么最新的才是最好的，而是要根据实际版本来选择最合适的，才是最好的。