Ссылочный путь к шрифту для Webpack и простого фреймворка

Question

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

У меня есть библиотека SCSS, которая частично структурирована, как показано ниже:

В flt-typography.scss являются @font-face декларации, такие как следующее:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url('../fonts/MaterialDesignIcons/MaterialIcons-Regular.woff2') format('woff2'),
      url('../fonts/MaterialDesignIcons/MaterialIcons-Regular.woff') format('woff');
}

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

Но я также хочу иметь возможность импортировать корень библиотеки SCSS в проект Vue (который доступен в локальном /company npm-репозитории):

<style lang="scss">
@import '~@fleet/ui/src/fleet-ui';
</style>

Из-за путей ошибки Webpack (vie vue-cli) утверждают, что он не может найти файлы шрифтов.

Если я закомментирую все свои шрифты в библиотеке и загрузлю их прямо в приложение, например:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url('~@fleet/ui/dist/fonts/MaterialDesignIcons/MaterialIcons-Regular.woff2') format('woff2'),
      url('~@fleet/ui/dist/fonts/MaterialDesignIcons/MaterialIcons-Regular.woff') format('woff');
}

... это работает отлично. Но сейчас библиотека сломана.

Как я могу структурировать библиотеку и / или app/Webpack так, чтобы ссылка на шрифт могла быть разрешена обоими?