Webpack & React, не находит шрифты при импорте одного scss файла в другой

Мой реакт проект собирается через webpack, в корневой папке лежит глобальный файл стилей global.scss(в нем все переменные и тд).

Так я настраиваю сборку шрифтов в вебпаке:

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

В global.scss я подключаю шрифты через font-face.

Этот файл я подключаю в разные файлы стилей компонентов. Проблема в том, что все эти файлы находятся в разных папках, но путь к шрифту, который я указываю в global.scss, один, указан он для корневых файлов. Поэтому возникает ошибка. Но если не импортировать глобальный scss, то все работает, шрифты собираются, но разумеется, мне этого недостаточно

ERROR in ./src/components/Content/CardsList/Card/CardText/CardText.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Content/CardsList/Card/CardText/CardText.scss)
    Module build failed (from ./node_modules/css-loader/dist/cjs.js):
    Error: Can't resolve './assets/fonts/Roboto-Regular.woff' in 'C:\Users\User\Desktop\reddit-website\src\components\Content\CardsList\Card\CardText'

Как мне импортировать один scss файл в другие, чтобы они все распознавали нормально путь к шрифту? Перепробовал множество способов, но ничего не помогло, помогите