webpack配置less报错

Question

rules: [

      {

        test: /\.css$/,

        use: [{

          loader: "style-loader" 

        }, {

          loader: "css-loader" 

        }]

      },

      {

        test: /\.less$/,

        use: [{

          loader: "style-loader" 

        }, {

          loader: "css-loader" 

        }, {

          loader: "less-loader"

        }]

      }

      ]

WARNING in ./node_modules/css-loader!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js!./src/routes/login/index.less

Module build failed:

var content = require("!!../../../node_modules/css-loader/index.js!../../../node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js!./index.less");

          ^

Unrecognised input

Answer 1

<style>@import '../../../less/index.less';</style>

Answer 2

因为你提供的信息太少，我猜测是你执行build命令，因为文件引用less文件的时候出错了。正确的方式是<style rel="stylesheet/less">@import '../../../less/XXX.less';</style>