Error while compiling less files

[maheshiv]

In my terminal i ran Maheshs-MacBook-Pro:sample mahesh$ node_modules/.bin/webpack --module-bind 'less=style!css!less'
I am getting below error
ERROR in .//css-loader!.//less-loader!.//style-loader!.//css-loader!.//less-loader!.//bootstrap/less/bootstrap.less
Module build failed: Unrecognised input

[mayacode]

I have exactly the same error. @maheshiv did you solve it? If yes, could you share the solution?

[sheerun]

same

[flowdee]

same here

[pterolex]

I was getting the same error when I had two loaders for less in webpack.config

[jongha]

I also have this error.
This problem has been resolved after removing an another loader setting.

[jhnns]

I was getting the same error when I had two loaders for less in webpack.config

Yep, that's also the case here as you can see in the console output 😁

[think2cat]

same here

` error in ./~/bootstrap/less/bootstrap.less

Module build failed:

// load the styles
var content = require("!!../../css-loader/index.js?{"minimize":false,"sourceMap":false}!../../less-loader/dist/cjs.js?{"sourceMap":false}!./bootstrap.less");
^
Unrecognised input
in D:\web\vue\iot\node_modules\bootstrap\less\bootstrap.less (line 4, column 12)

@ ./~/bootstrap/less/bootstrap.less 4:14-207 18:2-22:4 19:20-213
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

error in ./~/style-loader/lib/addStyles.js

Module build failed: Error: ENOENT: no such file or directory, open 'D:\web\vue\iot\node_modules\style-loader\lib\addStyles.js'
at Error (native)

@ ./~/bootstrap/less/bootstrap.less 12:13-60
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
`

[holidaying]

how to resolve？

[holidaying]

[Yunnkii]

have you solved it?

[think2cat]

@holidaying 把你的less文件发上来看看

[arixse]

same

[givingwu]

What f* for this error, It does not show anything about how to resolve or debug with it, So f* foolish.

[miraclesumail]

some happen to me today, i am so confused, how to solve

[miraclesumail]

有中国人吗 怎么弄

[majorcool]

有中国人吗 怎么弄
pterolex说的是正解，我遇到同样问题，原因也是在webpack config里重复写了两次less loader的配置。去掉其中一个就ok了。

[tail-call]

If this is happens due to your file matching two different match clauses, you can resolve it by either making patterns mutually exclusive, or by changing the extension of the .less file and having second pattern match against it. It's not the prettiest solution, though.

[lenolee16]

有中国人吗 怎么弄
pterolex说的是正解，我遇到同样问题，原因也是在webpack config里重复写了两次less loader的配置。去掉其中一个就ok了。

是的，我就是删除webpack.base.conf 里的{
test: /.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
},
{
loader: 'less-loader', // compiles Less to CSS
options: {
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
}
},
}]
}
修改build/utils 里的less: generateLoaders('less', { javascriptEnabled: true })
解决的。

[qinghua5453]

有中国人吗 怎么弄
pterolex说的是正解，我遇到同样问题，原因也是在webpack config里重复写了两次less loader的配置。去掉其中一个就ok了。

是的，我就是删除webpack.base.conf 里的{
test: /.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
},
{
loader: 'less-loader', // compiles Less to CSS
options: {
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
}
},
}]
}
修改build/utils 里的less: generateLoaders('less', { javascriptEnabled: true })
解决的。

确实可行。但.less文件里面不能写style标签，更没有scoped这样的命名空间了。会不会到时候样式串掉

[lenolee16]

有中国人吗 怎么弄
pterolex说的是正解，我遇到同样问题，原因也是在webpack config里重复写了两次less loader的配置。去掉其中一个就ok了。

是的，我就是删除webpack.base.conf 里的{
test: /.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
},
{
loader: 'less-loader', // compiles Less to CSS
options: {
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
}
},
}]
}
修改build/utils 里的less: generateLoaders('less', { javascriptEnabled: true })
解决的。

确实可行。但.less文件里面不能写style标签，更没有scoped这样的命名空间了。会不会到时候样式串掉

没有遇到你说的这个问题，这个是覆盖某个库文件的 modifyVars 变量而已

[qinghua5453]

哎。不得不说，以前自己配置webpack的时候 坑相对还少一些，虽然辛苦是辛苦了一点，但都是一个一个loader配置进去的，虽然不怎么健壮。自从用了cli后，发现遇到问题除了google来git上找问题，基本很难自己发现。坑也很难察觉。

[qinghua5453]

有中国人吗 怎么弄
pterolex说的是正解，我遇到同样问题，原因也是在webpack config里重复写了两次less loader的配置。去掉其中一个就ok了。

是的，我就是删除webpack.base.conf 里的{
test: /.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
},
{
loader: 'less-loader', // compiles Less to CSS
options: {
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
}
},
}]
}
修改build/utils 里的less: generateLoaders('less', { javascriptEnabled: true })
解决的。

确实可行。但.less文件里面不能写style标签，更没有scoped这样的命名空间了。会不会到时候样式串掉

没有遇到你说的这个问题，这个是覆盖某个库文件的 modifyVars 变量而已

我也出现，没法在less文件写style标签，就没法写scope这样的变量空间。

[oubinke]

有中国人吗 怎么弄

并没有找到build/utils文件在哪儿，但是我把需要添加的那段代码放在webpack.config.js的oneOf中不会报错。

// webpack.config.js
module.exports = {
  ...
  module: {
  ...
  rules: [
      ...
    {
     oneOf:[
      {
              test: /\.less$/,
              use: [{
                loader: 'style-loader',
              }, {
                loader: 'css-loader', // translates CSS into CommonJS
              }, {
                loader: 'less-loader', // compiles Less to CSS
              }]
            },
     ...
    ]
  }
};

[chrisdeely]

This is most likely caused by having duplicate rules defined which are handling .less files twice.

If you have some LESS files which are loaded using the use() method, the convention is to name them as styleName.useable.less

Be sure to exclude *.useable.less from the "default" less handler to avoid this error:

let rules = [
    {
        test: /\.useable\.less$/,
        use:
            [
                {
                    loader: "style-loader/useable"
                }
            ]
    },
    {
        test: /\.less$/,
        exclude:
            /\.useable\.less$/,
        use:
            [
                {
                    loader: 'style-loader'
                }
            ]
    }
]

[shallinta]

mark

[heycqing]

same， @pterolex 正解！