Laravel-mix: Laravel 5.4 - Bootstrap glyphicons don't work after sass integration

[aghayeff]

Use Laravel 5.4 Fresh Installation. Did npm run dev. Bootstrap, Jquery worked perfect, but Glyphicons weren't displayed. Checking my public/css/app.css I saw, that Glyphicons font-face path are not suitable.

src: url(/fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1);

If I, manually use ../fonts instead of /fonts it will work. I tried to figure out and edit the default path in _variables.css. I set:

$icon-font-path = "../fonts" - but npm gives error

By default it is: "~bootstrap-sass/assets/fonts/bootstrap/"

Copied fonts folder inside puclic/css folder, didn't work.

Added options to the webpack.mix.js file:
options({processCssUrls: false})

and in _variables.css again set:
$icon-font-path = "../fonts"

Run npm-run-dev and it worked, glyphicons were displayed. But, I don't want to set false for processCssUrls. Because, in this case I will not able to minimize css files using command: npm run production.

I updated laraval-mix version to 0.10.0, wasn't positive result.

[aghayeff]

Fixed it, using this solution:

https://github.com/JeffreyWay/laravel-mix/issues/75

[jeanfredson]

You can solve this problmem with CDN of BOOTSTRAP

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

[ruchern-chong]

@jeanfredson CDN defeats the whole purpose of using Laravel-Mix.

[carc1n0gen]

@aghayeff I had this same issue, but the link you shared for your solution is dead :(

[aghayeff]

@carc1n0gen find webpack.config.js file and find the line:

test: /\.(woff2?|ttf|eot|svg|otf)$/,

Inside options array change publicpath to

publicPath: '../'

That's all :)

[jeffz2012]

@aghayeff
I am sorry, but this is not a fix, but an ugly hack.
What if you update?
Another little thing that you have to remember, or your project will turn belly up?
Writing a mile long list of things to update by hand, when you are updating some lib, is not wise.
In this case, until this is thing is fixed (meaning, applied to: node_modules\laravel-mix\setupwebpack.config.js ), the only sensible solution is CDN.
Plus, it is way, faster (page load time wise).

@ruchern
"CDN defeats the whole purpose of using Laravel-Mix."

Using mix with bootstrap (or other popular cache-able libs) is not really smart.
Reason: load speed.
You use CDN not only to unload your drive, or use some better geographically located server offered by CDN company.
This is secondary.
Most important thing is browser caching.
By using CDN, your visitors may have just been to some other website, where their browser picked up bootstrap (or other popular, cache-able lib).
Given filename and location it was cached from, browser simply grab copy from cache instead of downloading bootstrap again.
So, as cool as mix is, it is a bad solution for popular libs (css/js).
Plus, if you want to apply changes to bootstrap, you can always overload. You never mess with lib.
So, you have to choose, what is more important for you:
a. use of flashy, new and hip tech, or
b. keep your site as snappy as possible, using all tricks and cut corners, when you can.

[carc1n0gen]

@jeffz2012 some people would rather have more control of the scripts they load, and a single minified js script can be beneficial

This is a place to get help, not to yell "get off my lawn"

[jeffz2012]

@carc1n0gen
I was not yelling.
I simply get across with what's on my mind directly.
I know, bummer.
Apologies to all offended.
Points remain:
a. popular js/css libs and mix ... should not 'mix' - use CDN and you make your site faster.
b. avoiding micromanagement is vital, unless you are coding blog for you grandma.

[carc1n0gen]

@jeffz2012

It's an English expression for when someone is complaining about new things

Anyways CDN isn't an option for people building apps at companies with policies that require controlling all the assets/data

[ruchern-chong]

@jeffz2012 CDN will create additional HTTP requests and thus can slow down the loading time of your site.

And on the topic of the caching issue. Laravel-Mix comes with cache busting by using the mix.version() function. It completely solves the following problem that you have mentioned.

By using CDN, your visitors may have just been to some other website, where their browser picked up bootstrap (or other popular, cache-able lib).
Given filename and location it was cached from, browser simply grab copy from cache instead of downloading bootstrap again.
So, as cool as mix is, it is a bad solution for popular libs (css/js).

With that, I suggest you to go and read up on what Laravel-Mix does and can offer.

[shahidkarimi]

Fixed it, using this solution:

https://github.com/JeffreyWay/laravel-mix/issues/75

This does not exists

[aghayeff]

Fixed it, using this solution:
https://github.com/JeffreyWay/laravel-mix/issues/75

This does not exists

Sorry for this. I updated that link. It should work

https://github.com/JeffreyWay/laravel-mix/issues/75