vue中less配置，处理各种异常错误安装less 2.修改webpack.base.conf.js文件，配置loade

安装less

npm install less less-loader --save--dev

2. 修改 webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的less，在原来的代码上添加（module里的rules）

module: {
    rules: [    
      // 添加下方代码块
      {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader",       
      }
    ]
  },

3. 使用：

<style scoped lang="less">.father{  width: 100px;  height: 100px;  .child{   width:20px;   height: 20px;  } }</style>

4. 注意：在使用中如果报错**：Module build failed: TypeError: loaderContext.getResolve is not a function。**这是指less-loader版本过高

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

5. 按照上述的配置后，如果在 main.js 里引入公共的 index.less，会出现以下错误

解决方法：vue-cli里已经在bulid文件里的utils里已经配置过less，不需要我们在单独在webpack.base.conf.js里配置，把我们上面加的代码删除掉就好。跟你安装的vue-cli 版本有关系。