Laravel with semantic-ui-css icon.woff2 404 not found in heroku - php

Question

When I upload the project to Heroku the icon of Semantic UI not show and I got net::ERR_ABORTED 404 (Not Found)
But in localhost, it works fine
I have checked the path in CSS file alls looks normal
webpack.mix.js
mix.scripts([
'node_modules/jquery/dist/jquery.js',
'node_modules/semantic-ui-css/semantic.min.js',
], 'public/js/app.js');
mix.sass('resources/sass/app.scss', 'public/css');
mix.setPublicPath('public');
mix.setResourceRoot('../');
app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Semantic
#import '~semantic-ui-css/semantic.min.css';
// Semantic ui icon
//#import '~semantic-ui-css/components/icon.min.css'; <-- I have try this not work !
Also, I add CSS file in the head like
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
Do any suggestions please why this happened ??

Answer 1

I figured out the problem was from a vendor directory in the font folder, I thing Heroku ignore that folder (vendor) for some reason,
The path fonts/vendor/semantic-ui-css/themes/default generated automatically by mix So what I do is modify webpack-rules.js file placed in node_modules\laravel-mix\src\builder
rules.push({
// only include svg that doesn't have font in the path or file name by using negative lookahead
test: /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/,
loaders: [
{
loader: 'file-loader',
options: {
name: path => {
if (!/node_modules|bower_components/.test(path)) {
return (
Config.fileLoaderDirs.images +
'/[name].[ext]?[hash]'
);
}
return (
Config.fileLoaderDirs.images +
'/' + //<--------------------- Remove vendor from image path
path
.replace(/\\/g, '/')
.replace(
/((.*(node_modules|bower_components))|images|image|img|assets)\//g,
''
) +
'?[hash]'
);
},
publicPath: Config.resourceRoot
}
},
{
loader: 'img-loader',
options: Config.imgLoaderOptions
}
]
});
// Add support for loading fonts.
rules.push({
test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
loader: 'file-loader',
options: {
name: path => {
if (!/node_modules|bower_components/.test(path)) {
return Config.fileLoaderDirs.fonts + '/[name].[ext]?[hash]';
}
return (
Config.fileLoaderDirs.fonts +
'/' + //<------------------------- Remove vendo from font path
path
.replace(/\\/g, '/')
.replace(
/((.*(node_modules|bower_components))|fonts|font|assets)\//g,
''
) +
'?[hash]'
);
},
publicPath: Config.resourceRoot
}
});
After push project to Heroku all working fine.
If anyone has a better solution or know why the vendor directory make this issue please explain.
Thanks for all.