Laravel Mix URL processing distorts file path

2
votes

I'm trying to set up Larvel Mix with internal URL processing, but somehow it disfigures all my file paths. For instance, if I use an icon in app.scss:

background-image: url("../icons/search.svg");

Everytime I get in app.css

background-image: url(/fonts/search.svg?0aeb120951582cc56d9d8681f88ff583);

The corresponding file is also copied to public/fonts/ and I just can't figure out, where this folder creeps into my path. In my webpack.mix.js I don't have anything special.

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')

Has anybody already had this kind of problem?

1
laravelnpmsasslaravel-mix

1 Answers

2
votes

This is because Laravel-mix will optimize relative stylesheet url()'s by default.

To disable this feature, go to webpack.mix.js in your project root.

Add:

mix.options({
    processCssUrls: false
});

However, if your use bootstrap-sass, it will cause it's Glyphicons font can't work.

To fix this, go to resources\assets\sass\_variables.scss

Change $icon-font-path: to "../fonts/vendor/[email protected]@bootstrap-sass/bootstrap/";