javascript - 模块解析失败: Unexpected character '' (1:0) when adding ttf to my stylesheet

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

我做了一些研究，发现了一些页面，例如:

Why does module parse failed: /xxx/MyFont.ttf Unexpected character ''

他们建议添加以下内容:

{
  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 使用。检查Angular's documentation上how to use with Webpack然后按照您在刚刚链接的文章中找到的方式添加文件加载器或使用 Angular's documentation (*loaders) .