file-loader with postTransformPublicPath

Question

I have an issue loading fonts with a dynamic public path replaced cdn at run time. So I have something like this:

vue.config.js file

chainWebpack: config => {
        config.module
            .rule('fonts')
            .use('file-loader')
            .loader('file-loader')
            .options({
                emitFile: true,
                name: '[name].[hash].[ext]',
                outputPath: 'staticV2/fonts/',
                publicPath: process.env.NODE_ENV === "production" ? "./#CDN#" : "/",
                postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`
            });
}

main.js (entry point) file

__webpack_public_path__ = window.cdnHost; // this is set at load time by the server side rendered index.html and works for all other resources like js, svg, png, etc except fonts

font-face.scss

@font-face {
  font-family: 'Noto Sans Regular';
  src: local('Noto Sans Regular'), local('NotoSans-Regular'),
  url(~@/design/assets/fonts/NotoSans-Regular.woff2) format('woff2'),
  url(~@/design/assets/fonts/NotoSans-Regular.woff) format('woff');
  font-display: swap;
}

font-face.css is loaded in App.vue file (root component)

it all works fine in development mode since i set the publicPath: "/" but when i build for production mode, the call for the fonts is something like : http://localhost/#CDN#/NotoSans-Regular.36747d3d16c9a73c831cb804fb8b1fab.woff2 as you can see the #CDN# placeholder is not getting replaced as the documentation for file-loader would suggest.

Thanks!