Как я могу добавить локальные шрифты в свое приложение для реагирования с помощью шрифта

Вот моя структура:

+ src/
++   assets/
+++    fonts/
++++      myfont.ttf
-- index.js
-- App.js
-- App.css

Я добавляю шрифт в _fonts.scss и импортирую его в App.scss

_font.scss

$font_dir: "../assets/fonts";

@font-face{
  font-family: 'myfont';
  src: url($font_dir + "myfont.ttf");
}

но проблема в том, что я получил эту ошибку !!

Module not found: You attempted to import ../assets/fonts/myfont.ttf which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Любая помощь оценить это?