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

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

Answer 2

<style lang="less">
@import '../../../less/index.less';
</style>