vue项目中使用less？

前提：用vue -cli脚手架生成vue项目，进入到项目根目录

1.用npm安装sass的依赖包

npm install less less-loader --save-dev

2..新版的vue-cli中已经不需要配置了！！！！在build目录下找到webpack.base.conf.js文件，在module的rules中插入以下代码

3.在vue文件中使用

<style lang='less' scoped>
    .page {
        display: flex;
        flex-wrap: wrap;
        .box {
        
        }
    }
</style>

4.最近在安装less，报了this.getOptions is not a function这样的错误

   原来是less版本安装过高。

   解决方案是：先执行：npm uninstall less-loader，后执行：npm install less-loader@5.0.0

5.或者一开始就严格控制版本号

npm install less@3.9.0 less-loader@4.1.0 --save-dev