@font-face 在安装 ParcelJS 后不工作

Question

我之前设置 Gulp 以使用 Sass、Pug 和 Babel。字体加载正常。我现在改用 Parcel 并且它按预期工作，除了一件事。字体未加载。

这里是_fonts.sass的全部内容：

@font-face
  font-family: "MyWebFont"
  src: url(../fonts/economica-regular-otf.eot)
  src: url(../fonts/economica-regular-otf.eot?#iefix) format("embedded-opentype"),
  url(../fonts/economica-regular-otf.woff2) format("woff2"),
  url(../fonts/economica-regular-otf.woff) format("woff"),
  url(../fonts/economica-regular-otf.ttf) format("ttf")

@font-face
  font-family: "MyWebFontBold"
  src: url(../fonts/economica-bold-otf.eot)
  src: url(../fonts/economica-bold-otf.eot?#iefix) format("embedded-opentype"),
  url(../fonts/economica-bold-otf.woff2) format("woff2"),
  url(../fonts/economica-bold-otf.woff) format("woff"),
  url(../fonts/economica-bold-otf.ttf) format("ttf")

body
  font-family: 'MyWebFont', 'Titillium Web', sans-serif
  text-rendering: auto
  text-rendering: geometricPrecision

文件夹结构如下：

/dist
/src
-- / pug
--- index.pug
-- / sass
--- _fonts.sass
--- _animations.sass
--- _blocks.sass
--- _elements.sass
--- styles.sass
-- / js
--- // all the scripts
-- / fonts
--- // all the fonts are here

您可以在此处找到项目文件（'new' 分支）：GitHub

Answer 1

我不久前就解决了这个问题。

在 package.json 中，我将 build 脚本编辑为 "build": "parcel build src/pug/index.pug --public-url ./ -d dist"。

然后我编辑了 _fonts.sass，所以 @font-face 不在目录中。例如，src: url(../fonts/economica-regular-otf.eot) 变成了 src: url(./fonts/economica-regular-otf.eot)。

我已经有一段时间没弄清楚了，所以我不记得这背后的原因，但它确实有效。

@font-face 在安装 ParcelJS 后不工作

@font-face not working after installing ParcelJS

html

css

sass

font-face

parceljs