Laravel - Compiling Assets - Url Processing

Because Laravel Mix is built on top of webpack, it's important to understand a few webpack concepts. For CSS compilation, webpack will rewrite and optimize any url() calls within your stylesheets. While this might initially sound strange, it's an incredibly powerful piece of functionality. Imagine that we want to compile Sass that includes a relative URL to an image:

    
    .example {
        background: url('../images/example.png');
    }
	
Absolute paths for any given url() will be excluded from URL-rewriting. For example, url('/images/thing.png') or url('http://example.com/images/thing.png') won't be modified.

By default, Laravel Mix and webpack will find example.png, copy it to your public/images folder, and then rewrite the url() within your generated stylesheet. As such, your compiled CSS will be:

    
    .example {
        background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
    }
	

As useful as this feature may be, your existing folder structure may already be configured in a way you like. If this is the case, you may disable url() rewriting like so:

    
    mix.sass('resources/sass/app.scss', 'public/css').options({
        processCssUrls: false
    });
	

With this addition to your webpack.mix.js file, Mix will no longer match any url() or copy assets to your public directory. In other words, the compiled CSS will look just like how you originally typed it:

    
    .example {
        background: url("../images/thing.png");
    }