So I'm trying to keep my file structure the same when when I smash everything together with mix, but my fontawesome icons all break when I npm run dev. My webpack.mix.js looks like this right now.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.sass('resources/sass/fontaws-bootstrap.scss', 'public/css');
mix.sass('resources/sass/backend/backend.scss', 'public/css').options({
processCssUrls: false,
});
I broke the bootstrap and font-awesome imports up into a different scss file thinking that would help but still breaks all the icons. Am I missing something here?
All the icons break because it doesn't know where to look anymore for the icons. You also need to add a copy command that copies over all the font-awesome fonts to your public directory
CHeck this out: https://github.com/JeffreyWay/laravel-mix/issues/490
so when you do
@import "~font-awesome/scss/font-awesome";
this is wrong and isn't going to work then? I'm a little confused.
It does, because you set this option processCssUrls: false. Now the urls to the font won't work anymore and therefore you see no icons anymore.
Please or to participate in this conversation.