Set url(path) when importing fontawesome with Sass

Question

Hello! I’m working with Node+webpack+Sass. When I run the script wabpack, is made the compilation of Sass, the Bundle of the js files and the result is all placed in the directory build/. Until there is no mystery, the problem is that the structure of the source files in the folder src/ is different from the structure generated in the folder build/. In src/ I have:

/src
---/fonts
---/html
---/images
---/scripts
---/styles

The Sass file that is in the folder Styles/core/ makes Imports of fontawesome-free:

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';

When the compilation is done the webpack puts everything(css, js, html) in the root of /build, and the fonts used in Sass he puts in /build/fonts:

/build
--- /fonts
------ fonts files
--- css files
--- js files
--- html files

So, I created a script that runs right after the compilation of webpack to organize everything in folders, ie:

/build
---/fonts
------ fonts files
---/css
------ .css files
---/js
------ .js files
---.html files

Files only html are at the root of /build. In the case of sources I do not need to do anything webpack already puts the sources in a folder /build/fonts/.

Now comes the problem, the . css files generated from the Sass build are configured to locate the sources in, for example, fonts/any-font.ttf and not in ../fonts/any-font.ttf Got it? The compiler Sass generates relative paths . css to find sources in fonts/ but as my post-build script organizes everything in folders, the relative path fonts/ doesn’t work anymore because the css files were moved to the folder /build/css the relative path would have to be ../fonts in no more fonts/.

I can fix this manually by editing the generated css, but this is not sustainable as at each build I will need to change the manually generated files.

My webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

const SRSTY = "./src/styles/";
const SRJS = "./src/scripts/";

const IS_IN_PROD = false;

module.exports =
{
    mode: IS_IN_PROD ? 'production' : 'development',

    entry: {
        main: [`${SRJS}main.ts`, `${SRSTY}main.scss`]   // Todos os scripts e styles da página principal
    },

    devtool: 'source-map',

    output: {
        path: path.resolve(__dirname, './build'),
        filename: '[name].js'
    },

    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },

    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    {loader: MiniCssExtractPlugin.loader},
                    {loader: 'css-loader'}, 
                    {loader: 'resolve-url-loader'}, 
                    {loader: 'sass-loader'}
                ]
            },

            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/'
                        }
                    }
                ]
            }
        ]
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
        new CopyPlugin({
            patterns: [
              { from: './src/html/main.html', to: 'main.html'},
            ]
        }),
    ],

    optimization: {
        minimize: IS_IN_PROD ? true : false,
        minimizer: [
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
                cache: true,
            }),
        ],
    },

}

Snippet of the . css generated by Sass where it defines the path to the sources:

/*!
 * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(fonts/fa-regular-400.eot);
  src: url(fonts/fa-regular-400.eot) format("embedded-opentype"), url(fonts/fa-regular-400.woff2) format("woff2"), url(fonts/fa-regular-400.woff) format("woff"), url(fonts/fa-regular-400.ttf) format("truetype"), url(fonts/fa-regular-400.svg) format("svg");
}

How could I "force" Sass to generate these url with a specific path?