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  scoped>
    .page {
        display: flex;
        flex-wrap: wrap;
        .box {
        
        }
    }
</style>
           

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

   原来是less版本安装过高。

   解决方案是：先执行：npm uninstall less-loader，后执行：npm install [email protected]

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

npm install [email protected] [email protected] --save-dev