How to properly set font paths in webpack when converting scss to css?

Question

css

Project structure:

src/
├── fonts/
├── js/
├── images/
└── sass/

fonts are included in _fonts.scss

@font-face {
  font-family: 'Geometria';
  src: local('Geometria Thin'), local('Geometria-Thin'),
    url('../fonts/Geometria-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

in webpack font loading setting:

{
        test: /\.(?:|woff)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: `./fonts/[name].[ext]`,
            }
          }
        ]
      }

When the project is built, the fonts folder is copied to dist/fonts , and in css it looks for fonts in the dist/css/fonts folder .
How to configure webpack so that when converting scss to css, it writes paths as /fonts/... and not /css/fonts/?

UPD

Probably worth describing css conversion settings

plugins: [
    new MiniCssExtractPlugin({
      filename: `./css/${filename('css')}`
    }),
],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
          loader: MiniCssExtractPlugin.loader,
          options: {}
        }, 'css-loader', 'sass-loader'],
      }
   ]
}

Answer 1

Found a solution, you need to add a publicPath that will be substituted for the url

use: [
          {
            loader: 'file-loader',
            options: {
              name: `fonts/[name].[ext]`,
              publicPath: "../",
            }
          }
        ]