Laravel-mix: Can't see GlyphIcons for bootstrap-sass

[valapy]

Hello everyone, Sorry if this is a know issue but I can't make it work. I have just installed Laravel 5.4 with the purpose to use bootstrap-sass, the new laravel Mix, and some other features. I was developing using npm run watch, everything went Ok until I used a GlyphIcon class in my html, it doesn't show. My google chrome console throw a 404 on each typography. I read a lot about this issue, some recommend to modify the webpack.config.js file which I did but it still doesn't work. I have the latest laravel mix version (0.10.0), my _variable.scss have the $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; variable. I tried npm run watch, npm run dev, npm run production but none of those work. What else I can do? Please help!

[bbluemel]

I don't specifically use glyphicons, but just tried it on my setup and they appear to work.
I use the following (with my other libraries removed of course):

var paths = {
    'bootstrap': './node_modules/bootstrap-sass/assets/'
}

mix.sass('resources/assets/sass/core.scss', 'css/core.css', {
   includePaths: [
      paths.bootstrap + 'stylesheets/' /* and my other ones */
   ]
}).options({
   processCssUrls: false
}).copyDirectory( paths.bootstrap + 'fonts/bootstrap/', 'public/fonts/bootstrap' )

This setup was mainly a performance benefit for me, as with webpack processing the css urls, it would increase build time by about 90s. The paths in my setup might not be optimal for laravel mix, but I only just started using it today. :)

[valapy]

Thanks for the reply bbluemel.. uhm where should I put that code? Sorry I'm new to sass and laravel.mix

[bbluemel]

It goes in your webpack.mix.js file.

[valapy]

I tried what you suggest but it still doesn't work, I think I'm going to avoid using GlyphIcons and use another font. Thanks!

[valapy]

I reopened this issue just to tell that I had to modify the publicPath value in the webpack.config.js to '../' to make it work. Shouldn't this work out of the box? Why we have to modify values to make it work? I have tried everything to make it work using Mix.options.resourceRoot but it always return a bad Path in the Font face src. I would love that @JeffreyWay could help me out to understand about this situation (It would an honor to have a response from Jeffrey).

Thanks in advance! Cheers!

[JeffreyWay]

I just tested this all out, and everything works. I added a simple -

<span class="glyphicon glyphicon-camera"></span>

to my HTML, and it rendered the camera properly.

[valapy]

Thanks for the fast response, well, I don't know what I'm doing wrong, I followed the installation steps with precaution, I have everything in the latest version, it should work without touching anything, but, the Path generated in the public/css/app.css shows as/fonts instead of../fonts, G Chrome throws a 404 error in the console because of that. But anyway, I will learn more about this weird behavior, maybe it's me doing something wrong. I just wanted to understand why is not working for me.

Thanks and sorry for bothering.

[labber]

I had the same behavior in Chrome. Adding .. in front of /fonts in public/css/app.css fixed the issue. Thanks @valapy

[Corben78]

Same problem for me with Laravel 5.5 and laravel-mix 1.6.1
I've read https://github.com/JeffreyWay/laravel-mix/issues/658 and https://github.com/JeffreyWay/laravel-mix/issues/881, and it seems that the setting publicPath in webpack.config.js has moved, so I couldn't find it.
I am not using a virtual host, where the laravel application is in the root folder, but a subfolder on my apache2 webserver. I've configured the directory and path through an apache2 config file, so htaccess works, meaning laravel is working perfectly in general, but the path to the fonts set by laravel mix is wrong. It creates an absolute path, where a relative path is needed.

Now after each npm run dev I have to manually set the path, which is not the desired procedure.
So what do I have to do to get eventually a relative path in app.css?

edit: I had processCssUrls set to true, when setting it to false, I can use $icon-font-path to my needs, e.g.

webpack.mix.js:

var paths = {
    'bootstrap': './node_modules/bootstrap-sass/assets/'
}

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css', {
        includePaths: [
            paths.bootstrap + 'stylesheets/'
        ]
    }).options({
        processCssUrls: false
    }).copyDirectory( paths.bootstrap + 'fonts/bootstrap/', 'public/fonts/bootstrap' );

resources/assets/sass/_variables.scss:

$icon-font-path: "../fonts/bootstrap/";

[RonaldBaljeu]

Same problem with Laravel 5.5.
processCssUrls: false
did the trick. Now i can use a relative $icon-font-path. Thanks @Corben78 !

[Corben78]

This is my actual setting, it's even easier...

resources/assets/sass/_variables.scss:

$icon-font-path: "../fonts/vendor/bootstrap-sass/bootstrap/";

webpack.mix.js:

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