Vue(三)—webpack安装less环境报错

新建了一个vue项目，当使用如下代码时报错了

<style scoped less="lang">

报错的信息如下：

大致意思是有依赖包没有找到，此时我在代码中去掉了scoped less="lang",只留下一个空的style，再次运行时正常显示了，然后我重新加回他们，在chrome中发现了报错信息，看到了找不到less-loader，然后我使用npm安装less-loader报了以下错误：

大致意思是，less-loader8.1.1需要webpack5.0.0的环境，less版本过高了，然后我进行了如下配置：

在工程中的package-lock.json的devDependencies与package.json的devDependencies中加入了如下代码：

"less": "^3.9.0",
"less-loader": "^5.0.0",

这里的package-lock.json我理解大概是npm安装依赖时被锁定的依赖包的版本，而package.json是安装依赖包后的依赖包版本，所以需要在这里设置下，否则用npm默认的安装命令，安装的依然是高版本。

在webpack.base.conf.js的module rules中加入以下代码：

{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader"
}

然后使用npm uninstall卸载当前的less与less-loader

最后使用npm安装指定less与less-loader

npm install -g less@3.9.0 
npm install -g less-loader@5.0.0