laravel mix: how to keep relative paths in css for images and fonts

Question

When Laravel Webpack/Mix executes and converts SASS to CSS, it changes the relative paths like url('../images/background.png'); to absolute paths like url('/images/background.png');.

Is it possible that the paths are not updated and kept as relative?

The reason is that the deployment could be in different folders on different servers so that the relative paths will work on all folder structures. E.g., it will work on http://www.example.com/ as well as http://www.example.com/subfolder/. But if an absolute path is used, then in the case of the subfolder, the CSS will not find the images and fonts.

Is there some other best practice to handle this situation?

Answer 1

From the docs:

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.

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

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

https://laravel.com/docs/5.5/mix#working-with-stylesheets