Не получается подгрузить стили через WebPack

Я пытаюсь подключить шрифты на WebPack но он их не видит. Скачал шрифты, настроил sass и css, но шрифты не подгружает. не могу понять в чем проблема

вот конфиг моего WebPack

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  entry: path.join(__dirname, 'src', 'index.js'), 
  output: {
    path: path.join(__dirname, 'dist'), 
    assetModuleFilename: path.join('images', '[name].[ext]'), 
  },
     module: {
         rules: [
           {
             test: /\.js$/, 
             use: 'babel-loader',
             exclude: /node_modules/,
           },
           {
            test:/\.pug$/, 
            loader:'pug-loader',
           },
           {
            test:/\.(scss|css)$/,
            use:[
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader',
                'sass-loader']
           },
           {
            test: /\.(png|jpg|jpeg|gif)$/i,
            type: 'asset/resource',
           },
           {
            test:/\.svg$/,
            type:'asset/resource',
            generator: {
              filename: path.join('icons', '[name].[ext]'),
            },
           },
           {
            test: /\.(woff2?|eot|ttf|otf)$/i,
            type: 'asset/resource',
          },
         ],
       },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'template.pug'),
      filename: 'index.html', 
    }),
    new FileManagerPlugin({
               events: {
                 onStart: { delete: [
                    {
                      source: './dist',
                      options: {
                        force: false,
                      },
                    },
                  ]},
               },
             }),
             new MiniCssExtractPlugin({
               filename: '[name].css', 
             }),
            ],
  devServer: {
    watchFiles: path.join(__dirname, 'src'), 
    port: 9000, 
  },
  optimization: {
         minimizer: [
           new ImageMinimizerPlugin({
             minimizer: {
               implementation: ImageMinimizerPlugin.imageminMinify,
               options: {
                 plugins: [
                   ['gifsicle', { interlaced: true }],
                   ['jpegtran', { progressive: true }],
                   ['optipng', { optimizationLevel: 5 }],
                   ['svgo', { name: 'preset-default' }],
                 ],
               },
             },
           }),
         ],
       },
     };
    

стили загружены в src/fonts в этой же папке находится fonts.scss

/* denk-one-regular - cyrillic-ext_latin_latin-ext */
@font-face {
     font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
     font-family: 'Denk One';
     font-style: normal;
     font-weight: 400;
     src: url('./denk-one-v17-cyrillic-ext_latin_latin-ext-regular.eot'); /* IE9 Compat Modes */
     src: url('./denk-one-v17-cyrillic-ext_latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('./denk-one-v17-cyrillic-ext_latin_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
          url('./denk-one-v17-cyrillic-ext_latin_latin-ext-regular.woff') format('woff'), /* Modern Browsers */
          url('./denk-one-v17-cyrillic-ext_latin_latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
          url('./denk-one-v17-cyrillic-ext_latin_latin-ext-regular.svg#DenkOne') format('svg'); /* Legacy iOS */
   }

так же в корневой папке src лежит index.js

import './main.scss';
import './fonts/fonts.scss';

function component(text) {
    const element = document.createElement('h1');
    element.textContent = text;
    return element;
  }
  
  document.body.prepend(component('Проект собран на Webpack'));

все собирается. если задаю в ручную какие либо стили, отрабатывает. а шрифты не грузит хоть убей.