将 StencilJS 导入到 Vue - 字体不起作用

如何解决将 StencilJS 导入到 Vue - 字体不起作用

我刚刚使用 StencilJS 创建了我的第一个 Web 组件包。使用 @stencil/sass 我制作了适用于整个页面的全局样式。此外，我在 Stencil 中制作了字体，但它不会加载到我导入 Web 组件的 VueCLI 项目中。

字体代码：

@font-face
  font-family: 'Uniform Condensed'
  src: url('assets/fonts/files/uniform/uniform_cyr_condensed-web.woff2') format('woff2')
  src: url('assets/fonts/files/uniform/uniform_cyr_condensed-web.woff') format('woff')
  font-weight: 400
  font-style: normal
  font-display: swap

@font-face
  font-family: 'Uniform Extra Condensed'
  src: url('assets/fonts/files/uniform/uniform_cyr_extra_condensed-web.woff2') format('woff2')
  src: url('assets/fonts/files/uniform/uniform_cyr_extra_condensed-web.woff') format('woff')
  font-weight: 400
  font-style: normal
  font-display: swap

@font-face
  font-family: 'Uniform Extra Condensed'
  src: url('assets/fonts/files/uniform/uniform_cyr_extra_condensed_medium-web.woff2') format('woff2')
  src: url('assets/fonts/files/uniform/uniform_cyr_extra_condensed_medium-web.woff') format('woff')
  font-weight: 500
  font-style: normal
  font-display: swap

@font-face
  font-family: 'Noe display'
  src: url('assets/fonts/files/noe/Noe_display_Bold-web.woff') format('woff')
  font-weight: 400
  font-style: normal
  font-display: swap

我知道问题出在链接上。如果我将 assets 文件夹从我的 Stencil 包中放入 public 它可以工作，但我希望字体在导入后自动加载。