vue中使用less出现的问题(style中使用less设置 scoped 遇到的坑)

最近在学vue的时候碰到的，在项目中的使用了 <style lang="less" scoped>，可以正常编译却不能启动成功，具体报错信息如下：

 

首先需要安装必要的插件

安装less依赖，npm install less less-loader --save 

修改webpack.base.config.js

在该js中的modules中的rules中增加

   // 解析less

      {

        test: /\.less$/, // 检查文件是否以.less结尾（检查是否是less文件）

        use: [

          // 数组中loader执行是从下到上，从右到左顺序执行

          "style-loader", // 创建style标签，添加上js中的css代码

          "css-loader", // 将css以commonjs方式整合到js文件中

          "less-loader", // 将less文件解析成css文件

        ],

      },