Laravel-mix: How to disable url resolve when compiling .less?

[donnysim]

How can I disable image path resolution when compiling less files? right now I'm getting

These dependencies were not found in node_modules:

* ./images/login_cover.jpg
* ./images/logo_icon_light.png
* ./images/backgrounds/seamless.png

because the images are in public folder.

[maengkom]

I'm just copy images folder in less folder also

[acacha]

See also example in https://github.com/JeffreyWay/laravel-mix/issues/212

[acacha]

@maengkom could you provide a working example with your solution? In my case copying images to less folder not solves the problem.

[acacha]

For reference here it seems the same problem is explained: https://github.com/webpack-contrib/less-loader/issues/76

SplicePHP have the same problem with same package (AdminLTE) and they say this is the expected behaviour :-(

[SebastianS90]

For AdminLTE you can just put this into your less file (after importing admin-lte):

@boxed-layout-bg-image-path: "../../dist/img/boxed-bg.jpg";

[acacha]

@SebastianS90 thanks it works!

[JeffreyWay]

So is there a Mix bug we need to fix here or not?

[SebastianS90]

The vendor library is not aware of webpack and thus gives paths that are relative to its compiled css files instead of relative to the less source files.

The huge advantage of webpack is that it can bundle all referenced files as specified by file-loader, e.g. to /fonts. All paths will be adjusted accordingly. But for this to work, the references must be relative to the less file location.

To work around vendor libraries that have wrong references, it would be nice to have a switch that tells webpack to ignore referenced files (i.e. use null-loader instead of file-loader for images and fonts)

[donnysim]

It's not really a bug but more of a question how to add url=false param to css-loader the Mix way?

[JeffreyWay]

The Mix way would be to either reference the images relatively, and store them in your resources/assets/images directory... or use absolute urls for all of your images, and Webpack won't touch them.

We can add a switch, though. I just need to think a bit about what that will be.

[sebastiandedeyne]

Would be nice to be able to not resolve image paths. As noted above, it can get in the way of references in vendor folders.

Currently have to send them to a noop function to ignore them.

[JeffreyWay]

For now, everyone can follow @donnysim's recommendation.

[Konafets]

@JeffreyWay Maybe I missed something but what is @donnysim recommendation?

[jason-beach]

@SebastianS90 is correct in saying:

The vendor library is not aware of webpack and thus gives paths that are relative to its compiled css files instead of relative to the less source files.

I've run into this issue and have been trying to come up with a work around (for 3 days) for now until something more concrete is implemented. Here's what I've done:

The problem: The core less files were one level too deep and it broke everything when running mix.

The solution: In webpack.mix.js I've added {relativeUrls:false} as the third argument when using mix.less()
Also, I've created a "master less" file in a folder relative to where the images, fonts, etc. are according to the vendors files I'm working with. I then import all required/core less files using the "master less" file, which were only 4 files. Then I ran npm run dev and everything compiled perfectly.

Ideally, I wouldn't have to create this "master less" file but it works for now and I'm allowed to continue on with my project. If anyone else has better insight into this, I'm all ears.

[stefanpolzer]

I have the same issue as @donnysim.
@SebastianS90 in my case your solution dose not work....

Just to recap the problem as I understand it:
using mix.less() causing errors if you using the url() argument and the path within is not absolute e.g.:

@font-face {
  font-family: 'Font';
  src: url('../fonts/webfont.eot');
  src: url('../fonts/webfont.eot')  format('embedded-opentype'),
  font-weight: normal;
  font-style: normal;
}

or

#foo {
    .bar {
      background: url(../images/bar.png) no-repeat  0 0;
  }
}

As described in the css-loader plugin readme and mentioned by @donnysim this could be solved if you add the option url: false

However I have no clue how to do this with laravel-mix. Is there any way at all?

[sebastiandedeyne]

Side note: this issue also exists with sass, not just less.

[JeffreyWay]

It's not an issue. It's a feature of Webpack's.

You can disable it with mix.options({ processCssUrls: false }).

[sebastiandedeyne]

I meant that not being to disable it was an issue, but didn't know about that option! :)

[shankarGdev]

How can I disable resolve-url-loader. I'm manually maintaining my fonts and images in css with relative path. My problem is in app.scss
background-image: url("../img/bg.jpg");
compiles to
background-image: url("./../../../public/img/bg.jpg"); in app.css
I need to disable this prefixing url relative to cscc files.

Note: I have already disabled processCssUrls

[JeffreyWay]

@iShankarG processCssUrls is how you do it.

mix.options({ processCssUrls: false });

[shankarGdev]

@JeffreyWay I think it's not working like you said, mix.options({ processCssUrls: false }); will use raw-loader instead of css-loader.

I think the issue is with resolve-url-loader, on laravel-mix v0.6.0 have same issue removing 'resolve-url-loader' + sourceMap, in webpack.config.js fix this issue, but I try removing in laravel-mix v0.8.0 it product sourcemap error. _(Correct me if I'm wrong on above two statements)_

My working procedure.
1) Install fresh Laravel
2) Update package.json with "laravel-mix": "^0.8.0", and run npm install
3) Turn off precessCssUrls in ewbpack.mix.js by adding mix.options({ processCssUrls: false });
4) In app.scss file add .someClass{ background-image: url(../img/1.jpg); } and compiling produce .someClass { background-image: url(./../../../public/img/1.jpg); } in app.css
_Note: If the image file doesn't exists at given location, it will not prefix relative path to scss file._

[JeffreyWay]

@iShankarG Ahh good catch. This is fixed in 0.8.5.

[shankarGdev]

@JeffreyWay It fixed the path issue, but build fails when importing SCSS files like @import "variables";

[JTallis]

While URL resolve is a neat feature, it seems to be problematic with absolute URLs.

I have this snippet of code:

@each $name, $code in $emoji-map {
  .twa-#{$name} {
    background-image: url("https://twemoji.maxcdn.com/2/svg/#{$code}.svg");
  }
}

The presence of the URL will cause the compilation to hang, neither failing nor compiling. Disabling processing of CSS URLs solves the problem but surely that is an underlying bug either with Webpack or Mix?