Laravel-mix: Error compiling less files with imports wihout extension (less without mix/webpack works)

[acacha]

• Laravel Mix Version: 1.5.0
• Node Version (node -v): v6.10.2
• NPM Version (npm -v): 5.4.2
• OS: Ubuntu
• less: "^3.0.0-alpha.3"

Description:

I'm using AdminLTE with Laravel mix. I don't know why but compilation with Laravel Mix stop to work. It seems the problem is with imports without .less extension

Steps To Reproduce:

You can use this repo:

https://github.com/acacha/AdminLTETinkerLaravelMix

webpack.mix.js File (https://github.com/acacha/AdminLTETinkerLaravelMix/blob/master/webpack.mix.js):

mix.less('build/less/AdminLTE.less','public/css')

AdminLTE.less file (https://github.com/acacha/AdminLTETinkerLaravelMix/blob/master/build/less/AdminLTE.less) have imports without .less extension like:

@import "print";

Clone repo, npm install and run:

$ npm run dev

> [email protected] dev /home/sergi/Code/almasaeed2010/AdminLTETinkerLaravelMix
> node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting                                                                      

 ERROR  Failed to compile with 2 errors                                                                    17:58:40

 error  in ./build/less/AdminLTE.less

Module build failed: 

@import "miscellaneous";
@import "print";
^
Can't resolve './print' in '/home/sergi/Code/almasaeed2010/AdminLTETinkerLaravelMix/build/less'
      in /home/sergi/Code/almasaeed2010/AdminLTETinkerLaravelMix/build/less/AdminLTE.less (line 62, column 0)

 @ ./build/less/AdminLTE.less 4:14-200
 @ multi ./node_modules/laravel-mix/src/builder/mock-entry.js ./build/less/AdminLTE.less

 error  in ./build/less/AdminLTE.less

Module build failed: ModuleBuildError: Module build failed: 

@import "miscellaneous";
@import "print";
^
Can't resolve './print' in '/home/sergi/Code/almasaeed2010/AdminLTETinkerLaravelMix/build/less'
      in /home/sergi/Code/almasaeed2010/AdminLTETinkerLaravelMix/build/less/AdminLTE.less (line 62, column 0)
    at runLoaders (/home/sergi/Code/almasaeed2010/AdminLTETinkerLaravelMix/node_modules/webpack/lib/NormalModule.js:195:19)
    at /home/sergi/Code/almasaeed2010/AdminLTETinkerLaravelMix/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /home/sergi/Code/almasaeed2010/AdminLTETinkerLaravelMix/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/home/sergi/Code/almasaeed2010/AdminLTETinkerLaravelMix/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at process._tickCallback (internal/process/next_tick.js:109:7)

 Asset     Size  Chunks             Chunk Names
mix.js  3.58 kB       0  [emitted]  mix
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] dev: `node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/sergi/.npm/_logs/2017-10-11T15_58_40_789Z-debug.log

Note that:

lessc build/less/AdminLTE.less

Works without any problem.

[devcircus]

I cloned your repo, ran yarn install and yarn run dev and everything compiled properly. The only problem I had was that the less file references a jpg that doesn't exist in the 'build' folder, so I copied it from 'dist' and everything just worked. There are a lot of issues with the repo concerning structure and organization, but as-is, compilation via mix works fine (assuming the boxed-bg.jpg can be found properly).

[legreco]

I have the exact same problem. I am googling for a solution...

[legreco]

after seeing this issue: https://github.com/less/less.js/issues/3115
I uninstall my current version of less (3.0 alpha3) I installed version 2.7.2
I get several errors unrelated to .less extension in third party extension, so i comment "import plugins" for the moment.
I get another error related to jpg file or something like that. To fix that i set
processCssUrls: false,
Finaly it works.
So i think the problem is the less version.

[robhuzzey]

@legreco regarding your issue with the .less extensions... you could try

resolve: {
      extensions: ['.js', '.json', '.less']
    }

in your webpack config as that way if you try to include without extensions it will try those extensions (if that makes sense).

[acacha]

@devcircus Could you give us more info about you environment? Are you using less 3.0 ?

[acacha]

@legreco thanks for the info I confirm you tahat using 2.7.2 less version the problem dissapears.

[acacha]

@robhuzzey it works thanks! But the question is: is this a documented change? I also don't understand if this problem is related with less or webpack...

[acacha]

@robhuzzey

How can I use something like:

mix.config.resolve.extensions.push('.less')

To only add .less to existing resolved extensions?

I worried about warning in docs:

https://webpack.js.org/configuration/resolve/#resolve-extensions

i can solve and issue but maybe provoke others.

[gpressutto5]

I'm having the exactly same error

[JeffreyWay]

So should we add .less to that extension array and be done with it?

[gpressutto5]

@JeffreyWay While it's easy to add .less to the extensions array it took me a while to find out I needed to do this. Are there any cons about adding it?

[acacha]

@JeffreyWay yes adding .less works. But it seems less has confirmed a bug https://github.com/less/less.js/issues/3115 so maybe when this bug is resolved it would not be necessary to add .less and all can work as before.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.