CODEWITHSUNDEEP
webpacklaravel-5.5laravel-mix
adam78
adam78

Reputation: 10078

Laravel Mix Incorrect Url for Bootstrap Fonts

I'm using laravel 5.5 and I'm trying to compile a less file with some bootstrap overrides.

I have the following in my webpack.mix.js file:

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

app.less is as follows:

@import "~bootstrap/less/bootstrap";
@import "_variables.less";

// custom styles

_variables.less is as follows:

// Brands
@brand-primary:      #005689;

// Iconography
@icon-font-path:        "../fonts/";

however the compiled app.css is generating the font-face url as follows:

@font-face {
   font-family: 'Glyphicons Halflings';
   src: url('../../../node_modules/bootstrap/fonts/glyphicons-halflings-regular.eot');

}

Looks like its generating the url relative to the import @import "~bootstrap/less/bootstrap"

How can I force it to generate the font-face url as:

@font-face {
   font-family: 'Glyphicons Halflings';
   src: url('../fonts/glyphicons-halflings-regular.eot');

}

Upvotes: 1

Views: 717

Answers (1)

adam78
adam78

Reputation: 10078

Fixed by doing the following:

mix.js('resources/assets/js/app.js', 'public/js')
   .less('resources/assets/less/app.less', 'public/css', { relativeUrls: false
    })
  .options({
     processCssUrls: false
   });

Upvotes: 4

Related Questions