Laravel-mix: npm run dev

[mikemenard]

I get this error when I run npm run dev on a fresh install.

npm-debug.log.zip

[JeffreyWay]

This will be fixed here - https://github.com/laravel/laravel/pull/4136 - as soon as it's merged. Until then, you can manually add

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";

to your resources/assets/sass/_variables.scss file.

[mesqueeb]

This fixed the bug for me!

[vedmant]

@JeffreyWay I have the same issue after upgrading to 0.6 version. This fix with font path variable doesn't fix actual problem with relative paths, I have many correct relative paths in my scss files to images, but now all they are not loading. Relative paths to resources are set for all node packages by default, like "font-awesome", "simple-line-icons", "bootstrap-sass" I think they should be loaded using default relative paths, but it fails now.

Another example is datatables styles from "~datatables.net-dt/css/jquery.dataTables" it fails, because it can't resolve relative images path * ../images/sort_both.png how to handle it now, there is variable to change path to images.

[apocalyarts]

^ +1

Having the same problem with fontawesome and flag-icon-css packages.

[cmgmyr]

@apocalyarts for font awesome you'll have to add this to your variables file

$fa-font-path: "~font-awesome/fonts/";

Ref

[vedmant]

@cmgmyr What about ~datatables.net-dt/css/jquery.dataTables or any other package without variables for path, or just plain css.

[BlazOrazem]

That's jus terrible. Now I must include bootstrap from npm package, because it doesn't work via bower package.. same error with these fonts..

[adriaanzon]

Why? Can't you change the font path variable to where bower puts the files?

[mislam]

@JeffreyWay After upgrading from Laravel 5.3 to 5.4 and Spark 3 to 4, I am getting:

Did you forget to run npm install --save for them?
               Asset      Size  Chunks                    Chunk Names
          /js/app.js   1.48 MB       0  [emitted]  [big]  /js/app
   mix-manifest.json  32 bytes          [emitted]
js/sweetalert.min.js     17 kB          [emitted]
  css/sweetalert.css   22.9 kB          [emitted]

Any idea?

[lasseeee]

What about packages that doesn't have a variable for path, like plain CSS files? In my specific case it's image files from fronteed/iCheck/that make caravel-mix squawk. Don't want to dive in and go editing vendor files.

[Hugome]

For plain css you can use ~ :

I want to integrate admin-lte so i include the css :

@import "node_modules/admin-lte/dist/css/AdminLTE";
@import "node_modules/admin-lte/dist/css/skins/skin-blue";

Result :

This dependency was not found in node_modules:

* ../img/boxed-bg.jpg

Did you forget to run npm install --save for it? 

I replace with :

@import "~admin-lte/dist/css/AdminLTE.css";
@import "~admin-lte/dist/css/skins/skin-blue.css";

And build successful !
With the asset 'img/boxed-bg.jpg' copied in public/images/

[lasseeee]

Cool, thanks! It seems to resolve regardless in v8.0.0.

[georaldc]

@Hugome Similar issue to this https://github.com/almasaeed2010/AdminLTE/issues/1360

Adding mix.options({ processCssUrls: false }); works for me. The option was added in version 0.8.0

https://github.com/JeffreyWay/laravel-mix/releases/tag/v0.8.0