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

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

0 голосов
/ 30 августа 2018

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

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

enter image description here

В 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 (который доступен в локальном / корпоративном репозитории 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');
}

... работает нормально. Но теперь библиотека сломана.

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

...