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.

Answer 1

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.