将自定义字体添加到 .NET Core 2.0 Angular

Question

我有一个使用 Angular 2 模板的 .NET Core 2.0 应用程序。

问题是我无法在 app.component.css 中添加自定义字体 (woff2)

@font-face {
    font-family: 'FrutigerBold';
    src: url("./assets/fonts/frutiger65_bold.woff2") format('woff2');
}

并得到以下错误：

NodeInvocationException：预渲染因错误而失败：错误：模块解析失败：C:\Users\gbuenrostro\documents\visual studio 2017\Projects\SecurityAngular\SecurityAngular\ClientApp\app\assets\fonts\frutiger65_bold.woff2 意外字符' �' (1:4)

您可能需要适当的加载程序来处理此文件类型。

（此二进制文件的源代码省略）

有什么想法吗？

这是项目：

Answer 1

不要在 app.component.css 中添加 css。 创建一个 file.css 以包含字体（然后不放在资产文件夹中）并更改 webpack.config.vendor 在 nonTreeShakableModules 中添加文件

const nonTreeShakableModules = [
    ...
    'file.css',
    ...
];