Question

Я пытаюсь создать веб-компонент, используя vue cli 3, выполнив следующую команду

vue-cli-service build --target wc --name wc-demo 'src/App.vue'

У меня проблема с загрузкой шрифтов и значков материалов внутри веб-компонентов.

Я импортирую roboto-font.s css и material-icon.s css внутри тега стиля приложения. vue - это запись для создания веб-компонента.

<style lang='scss'>
// @import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
@import "~@/assets/fonts/roboto-font/roboto-font.scss";
@import "~@/assets/fonts/material-icons/material-icons.scss";
</style>

Material-icon.s css

$font-dir: "assets/fonts/material-icons/web-font/";

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  // src: url('https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2') format("woff2");

  src: url("#{$font-dir}flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2") format("woff2"),
  url("#{$font-dir}flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff") format("woff");
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

Roboto-font. s css

$font-dir: "assets/fonts/roboto-font/web-font/";

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url("#{$font-dir}KFOkCnqEu92Fr1MmgVxIIzQ.woff") format("woff");
}

Все отлично работает при запуске проекта с использованием

подачи пряжи

. Шрифты нормально загружаются на вкладке сети, но после создания веб-компонента и загрузки его в браузере с использованием « live server » шрифты не загружаются на вкладке сети.

Единственный способ, которым я мог сделать шрифты и значки работают путем добавления тегов ссылки в файл индекса. html. Но не внутри веб-компонента (внутри теневого Dom)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>wc-demo</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
      rel="stylesheet"
    />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src=“./wc-demo.js"></script>
    <wc-demo></wc-demo>
  </body>
</html>

Может кто-нибудь помочь мне понять, как включить шрифты в веб-компонент или использовать его в разделе заголовка файла html - единственный вариант?

Также я связал некоторые похожие проблемы, которые могут помочь вам, таким как я: -

https://bugs.chromium.org/p/chromium/issues/detail?id=336876

@ font-face не работает в полимерных / веб-компонентах

https://robdodson.me/at-font-face-doesnt-work-in-shadow-dom/

Почему Font Awesome не работает в моем Shadow DOM?