Laravel Mix disable file loader for url()

Question

Laravel 5.4 introduced laravel mix with webpack. There is no clear documentation for working with images in laravel mix(like, how it works and to customize it for our needs). Since it is not working as I expected, I would like to disable it for my current project.

How could I disable it?

I have tried by removing below code in webpack.config.js:

{
     test: /\.(png|jpg|gif)$/,
     loader: 'file-loader',
     options: {
         name: '[name].[ext]?[hash]'
      }
}

but running the command npm run dev produces this error:

You may need an appropriate loader to handle this file type.

Where are you using the images? Is it inside your `sass` and `less` files? — PaladiN, Jan 31 '17 at 06:33
This might be helpful https://github.com/JeffreyWay/laravel-mix/issues/218 — Marty Aghajanyan, Feb 03 '17 at 06:10
If your problem still persists, the point of `loaders` is for `webpack` to understand how to handle file contents other than `javascript`. So removing the loaders for `images` doesn't help `webpack` in bundling `images`. — debatanu, Feb 10 '17 at 13:14

Shankar Prakash G · Accepted Answer · 2017-03-13T06:28:18.983

Laravel Mix Version 0.8 and Above

As on laravel mix v0.8 there is simple api options to do it. To disable url() file loader set below options in webpack.mix.js

mix.options({
    processCssUrls: false
});

Laravel Mix Version 0.7 and Below

Solution 1: Disable url() handling

The url() are interpreted like import by css-loader. Currently CSS-Loader is kind of an all-or-nothing approach, so we need to disable all url() handling, to do so..

Open node_modules\laravel-mix\setup\webpack.config.js and make following changes,

{ loader: 'css-loader' + sourceMap },

replace with

{ loader: 'css-loader?url=false' + sourceMap.replace("?", "&") },

Solution 2: Using absolute link in url()

The URLs that start with a /, will not be handled eg:url(/images/something.jpg). If your project support url starting with /, you can use as it is there will not be any issue.

Actually there were bugs connected to the image url processing, which were fixed in the versions after 0.8, so the best advice is to update your package.json configuration with the latest laravel-mix version (don't forget to run ```npm install```) and after that add ```mix.options({ processCssUrls: false });``` to your webpack.mix.js. You can check the number of the version here: https://github.com/JeffreyWay/laravel-mix — tsveti_iko, May 09 '17 at 08:55

Laravel Mix disable file loader for url()

1 Answers1

Laravel Mix Version 0.8 and Above

Laravel Mix Version 0.7 and Below