Can't see GlyphIcons for bootstrap-sass

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!

[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
   });

[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/";