Laravel-mix: LESS: mix.copy working but mix.less failing on @import

[Sennik]

node -v
v7.6.0
npm -v
4.3.0

package.json

{
  "private": true,
  "scripts": {
    "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",
    "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "bootstrap-less": "^3.3.7",
    "jquery": "^3.1.0",
    "laravel-mix": "^0.8.8",
    "lodash": "^4.16.2",
    "vue": "^2.0.1"
  }
}

I am trying to use laravel-mix with less, All the mix.copy's are working but npm run dev fails on mix.less('resources/assets/less/app.less', 'public/css'); when I use @import in app.less. Without it it compiles fine to public/css/app.css.

Strangely:
@import "variables"; works
@import "bootstrap/bootstrap"; fails

resources/assets/less/ contains a directory bootstrap with a bootstrap.less (Which imports the bootstrap less files in the same directory). This is just an example, trying to import other directory/file.less let npm run dev fail too.

The error message:
npm ERR! Failed at the @ dev script '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'.

[helissonms]

I have the same problem

[Sennik]

Please use the thumbs up on my message if you are expieriencing the same problem.

It got me stuck for the two days now...

[devcircus]

Looks to be the cross-env issue. There are many issues spread across several laravel repos about this with solutions. I'd start by deleting your node_modules folder then grab the latest package.json from the laravel github. Then run npm install. If that doesn't solve then check out some of the other issues dealing with the same problem.

[JeffreyWay]

@Sennik I need the full error message output, not just the first line.

[Sennik]

@devcircus: I did that already: nuking the node-modules, latest packages.json from github en thereafter npm install.

@JeffreyWay

npm ERR! Linux 4.4.0-63-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v7.6.0
npm ERR! npm  v4.3.0
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ 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 @ dev script '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! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     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! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls
npm ERR! There is likely additional logging output above.

There is no logging above this error other than the output from the mix.copy lines (all green, no errors)

[JeffreyWay]

Try running this command directly:

NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

Any change?

[Sennik]

Yes!

Your command resulted in this (new) error:

sudo 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 5 errors                                                                                                                                                 10:36:28 PM

These relative modules were not found:

* ./fonts/glyphicons-halflings-regular.eot in ./~/css-loader!./~/postcss-loader!./~/less-loader?{}!./resources/assets/less/app.less
* ./fonts/glyphicons-halflings-regular.woff2 in ./~/css-loader!./~/postcss-loader!./~/less-loader?{}!./resources/assets/less/app.less
* ./fonts/glyphicons-halflings-regular.woff in ./~/css-loader!./~/postcss-loader!./~/less-loader?{}!./resources/assets/less/app.less
* ./fonts/glyphicons-halflings-regular.ttf in ./~/css-loader!./~/postcss-loader!./~/less-loader?{}!./resources/assets/less/app.less
* ./fonts/glyphicons-halflings-regular.svg in ./~/css-loader!./~/postcss-loader!./~/less-loader?{}!./resources/assets/less/app.less 

My bootstrap glyphicons where in resources/assets/fonts, after I moved them to resources/assets/less/fonts it worked, and it also did with npm run dev!

Next I added @import "font-awesome/fontasewome" to app.less after which it failed again without a clear errormessage. So I used your command again and as a result I got a clear error message I could work with to solve the problem.

Thank you @JeffreyWay !

It would be nice to have this error reporting while using npm run though :-)

[helissonms]

This path is different: "node_modules/cross-env/dist/bin/cross-env.js"

There is no longer the "bin" folder, thus: "node_modules/cross-env/dist/cross-env.js"

I did not have time to test.

[Sennik]

@HelissonMS:
Following my newly installed node-modules:
node node_modules/cross-env/bin/cross-env.js
became
node node_modules/cross-env/dist/bin/cross-env.js

Just like I referenced in packages.json

[helissonms]

@Sennik
Sorry, I wrote it wrong. I have already edited my previous review, please check it out.

[jason-liang]

It's worked! thanks,bro @devcircus