adding custom fonts to storybook

Question

i'm making a component library that i use through my applications, it work fine but when i added my custom fonts used by my icons, my storybook couldn't start anymore (the lib and the Icon component is still working).

this is how I imported my files

in my .storybook/main.js

const postcss = require("postcss");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-scss",
    {
       name: "@storybook/addon-postcss",
       options: {
         cssLoaderOptions: {,
           importLoaders: 1,
         },
         postcssLoaderOptions: {
           implementation: postcss,
         },
       },
     },
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  },
};

in my src/styles/index.scss

@import "fonts";
@import "colors";
@import "sizes";
@import "icons/icons";

*,
*::before,
*::after {
  box-sizing: border-box;
}

// etc

in stc/styles/icons/icons.scss

@import "my-icons-variables";
$icomoon-font-family: "my-icons" !default;
$icomoon-font-path: "./fonts" !default;

@font-face {
  font-family: '#{$icomoon-font-family}';
  src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff2') format('woff2'),
  url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf') format('truetype'),
  url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff') format('woff'),
  url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg##{$icomoon-font-family}') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

// etc

and all my icon font files are located in src/styles/icons/fonts/*

when i try to run my storybook i got this kind of errors

ModuleNotFoundError: Module not found: Error: Can't resolve './fonts/my-icons.woff2' in '/home/victor/dev/design-components/src/components/layout/section'
    at /home/victor/dev/design-components/node_modules/webpack/lib/Compilation.js:2016:28
    at /home/victor/dev/design-components/node_modules/webpack/lib/NormalModuleFactory.js:798:13
    at eval (eval at create (/home/victor/dev/design-components/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /home/victor/dev/design-components/node_modules/webpack/lib/NormalModuleFactory.js:270:22
    at eval (eval at create (/home/victor/dev/design-components/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at /home/victor/dev/design-components/node_modules/webpack/lib/NormalModuleFactory.js:434:22
    at /home/victor/dev/design-components/node_modules/webpack/lib/NormalModuleFactory.js:116:11
    at /home/victor/dev/design-components/node_modules/webpack/lib/NormalModuleFactory.js:670:25
    at /home/victor/dev/design-components/node_modules/webpack/lib/NormalModuleFactory.js:855:8
    at /home/victor/dev/design-components/node_modules/webpack/lib/NormalModuleFactory.js:975:5
    at /home/victor/dev/design-components/node_modules/neo-async/async.js:6883:13
    at Array.<anonymous> (/home/victor/dev/design-components/node_modules/webpack/lib/NormalModuleFactory.js:950:14)
    at arrayEachFunc (/home/victor/dev/design-components/node_modules/neo-async/async.js:2517:19)
    at Object.parallel (/home/victor/dev/design-components/node_modules/neo-async/async.js:6858:9)
    at NormalModuleFactory._resolveResourceErrorHints (/home/victor/dev/design-components/node_modules/webpack/lib/NormalModuleFactory.js:873:12)
    at /home/victor/dev/design-components/node_modules/webpack/lib/NormalModuleFactory.js:834:18
    at finishWithoutResolve (/home/victor/dev/design-components/node_modules/enhanced-resolve/lib/Resolver.js:312:11)
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/Resolver.js:386:15
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/home/victor/dev/design-components/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/home/victor/dev/design-components/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/home/victor/dev/design-components/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/forEachBail.js:16:12
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/AliasPlugin.js:125:14
    at next (/home/victor/dev/design-components/node_modules/enhanced-resolve/lib/forEachBail.js:14:3)
    at forEachBail (/home/victor/dev/design-components/node_modules/enhanced-resolve/lib/forEachBail.js:24:9)
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/AliasPlugin.js:51:5
    at _next0 (eval at create (/home/victor/dev/design-components/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
    at eval (eval at create (/home/victor/dev/design-components/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:30:1)
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/home/victor/dev/design-components/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/home/victor/dev/design-components/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/RootsPlugin.js:37:38
    at _next2 (eval at create (/home/victor/dev/design-components/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
    at eval (eval at create (/home/victor/dev/design-components/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:31:1)
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/ConditionalPlugin.js:40:47
    at _next1 (eval at create (/home/victor/dev/design-components/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1)
    at eval (eval at create (/home/victor/dev/design-components/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:46:1)
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/ConditionalPlugin.js:40:47
    at _next0 (eval at create (/home/victor/dev/design-components/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:38:1)
    at eval (eval at create (/home/victor/dev/design-components/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:60:1)
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/home/victor/dev/design-components/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
    at /home/victor/dev/design-components/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/home/victor/dev/design-components/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
resolve './fonts/my-icons.woff2' in '/home/victor/dev/design-components/src/components/layout/section'
  using description file: /home/victor/dev/design-components/package.json (relative path: ./src/components/layout/section)
    using description file: /home/victor/dev/design-components/package.json (relative path: ./src/components/layout/section/fonts/my-icons.woff2)
      no extension
        /home/victor/dev/design-components/src/components/layout/section/fonts/my-icons.woff2 doesn't exist
      .mjs
        /home/victor/dev/design-components/src/components/layout/section/fonts/my-icons.woff2.mjs doesn't exist
      .js
        /home/victor/dev/design-components/src/components/layout/section/fonts/my-icons.woff2.js doesn't exist
      .jsx
        /home/victor/dev/design-components/src/components/layout/section/fonts/my-icons.woff2.jsx doesn't exist
      .ts
        /home/victor/dev/design-components/src/components/layout/section/fonts/my-icons.woff2.ts doesn't exist
      .tsx
        /home/victor/dev/design-components/src/components/layout/section/fonts/my-icons.woff2.tsx doesn't exist
      .json
        /home/victor/dev/design-components/src/components/layout/section/fonts/my-icons.woff2.json doesn't exist
      .cjs
        /home/victor/dev/design-components/src/components/layout/section/fonts/my-icons.woff2.cjs doesn't exist
      as directory
        /home/victor/dev/design-components/src/components/layout/section/fonts/my-icons.woff2 doesn't exist

(this for each of my components)

Am I missing something maybe with a webpack conf ? or maybe I should not import the icons fonts this way ?