Vue中less使用步骤以及常见错误

最近写VUE项目，本来时间就比较紧急，结果环境还一直有问题，用到了less，感觉在上面踩了坑。终于找到了一个好的解决方式。记录一下也给需要帮助的人。

VUE如何配置less

1.npm安装less
npm install less less-loader --save-dev

2.更改配置文件
build/webpack.base.conf.js

3.在mudule rules中添加
{
test: /.less$/,
loader: “style-loader!css-loader!less-loader”, },

4.在VUE组件中使用

【npm run dev】启动项目后，报错：

****
原因是由于less-loader安装的版本过高，在【package.json】中，可查看到安装的版本

****解决方法：卸载安装的高版本的less-loader，【npm uninstall less-loader】，安装指定低版本的less-loader【npm install less-loader@4.1.0 --save】