模块解析失败：将ttf添加到样式表时出现意外的字符''（1：0）

Question

我是Angular的新手。 我已经完成了教程，现在正在构建我的第一个应用程序。

添加OTF文件效果很好，但是当我对app.component.css进行更改并添加时：

@font-face { font-family: bookman; src: url('../../../BOOKOS.TTF'); }

添加此行时，在浏览器中出现以下错误：

Failed to compile.

../BOOKOS.TTF
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./src/app/app.component.css 7:186-216
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

我做了一些研究，发现了几个页面，例如：

为什么模块解析失败：/xxx/MyFont.ttf意外字符”

他们建议添加以下内容：

{
  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
  loader: 'file-loader?name=assets/[name].[hash].[ext]'
}

到我的webpack配置规则数组。

问题是我不知道那是什么。 看起来webpack可能是Angular在幕后使用的JS库，但是我的目录结构中没有webpack的任何配置文件。

Answer 1

您必须创建自己的Webpack配置以供Angular使用。 查看有关如何与Webpack一起使用的 Angular文档 ，然后以您刚刚链接的文章中找到的方式或使用Angular文档（* loaders）的方式添加文件加载器。

Answer 2

我没有直面解决问题，而是绕开了它。 我使用https://everythingfonts.com/ttf-to-otf将我的TTF字体转换为OTF。 请注意，这不适用于所有字体，但这是公共领域，因此可以转换格式。