Как правильно настроить пути к шрифтам в webpack при конвертации scss в css?

Question

[Максим Белоусов]

Структура проекта:

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

шрифты подключаются в _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;
}

в webpack настройка загрузки шрифтов:

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

При сборке проекта папка fonts копируется в dist/fonts, а в css он ищет шрифты в папке dist/css/fonts.
Как настроить webpack, чтобы при конвертации scss в css он прописывал пути как /fonts/... а не /css/fonts/?

UPD

Наверное, стоит еще описать настройки конвертации css

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

[Максим Белоусов]

Нашел решение, нужно добавить publicPath который будет подставляться к url

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