CSS Import rule does not work on apache subfolder

Question

I am creating a Laravel app with laravel-mix.

The problem

I did import font-awesome in my resources/css/app.css file with the following command.

@import '~@fortawesome/fontawesome-free/css/fontawesome';
@import '~@fortawesome/fontawesome-free/css/regular';
@import '~@fortawesome/fontawesome-free/css/solid';
@import '~@fortawesome/fontawesome-free/css/brands';

Everything is working fine on my docker, but when i deployed on a LAMP server the fontawesome's fonts start to return a 404 error when the page was loading.

On the server i have the following Apache VirtualHost configuration

Alias /assticket /var/www/html/assticket/public
<Directory /var/www/html/assticket>
AllowOverride All
    Options None
    Order allow,deny
    allow from all

    Options +FollowSymLinks -Indexes
</Directory> 

I checked and the reason is because the page is resolving the following url:

• https://<host>/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?e615bbcb258550973c165dfc0d871c96

instead of:

• https://<host>/assticket/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?e615bbcb258550973c165dfc0d871c96

How can i redirect the @import rule to this new path?

What i tryied so far:

Use the HTML base tag:

I added this line in the blade template:

<base href="{{ config('app.url') }}" />

Tryed to change laravel-mix config

i added in the webpack.mix.js the following code:

const path = require('path');

mix.webpackConfig({
    output: {
        publicPath: '/assticket/'
    },
    resolve: {
        alias: {
            '@': path.resolve('resources/js')
        }
    }
});

...

Both attemps didn't change anything. After each attempt i cleaned every cache possible in laravel with the following command.

php artisan cache:clear
php artisan config:clear
php artisan config:cache
php artisan view:clear
php artisan view:cache

Additional Info

Laravel version

My laravel version is 8.83

webpack.mix.js file

This is my webpack.mix.js file, in case it is needed:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/const.js', 'public/js')
    .js('resources/js/ticketform.js', 'public/js')
    .js('resources/js/dashboard.js', 'public/js')
    .js('resources/js/chat.js', 'public/js')
    .css('resources/css/ticketform.css', 'public/css')
    .postCss('resources/css/app.css', 'public/css', []);

Answer 1

After hours of searching i found the solution. I post this as an answer if someone will need it in the future.

Basic solution

I did resolve by setting up the resource root in the webpack.mix.js file with my apache subfolder.

mix.setResourceRoot("/assticket/");

Prettier solution

To make it prettier i did add a new entry in the .env file

WEBSERVER_SUBFOLDER=/assticket/

and changed the webpack.mix.js file like below:

require('dotenv').config();
mix.setResourceRoot(process.env.WEBSERVER_SUBFOLDER);