Question

我有一个基于Webpack 4的Angular 6 SPA，用于基于以下仓库进行捆绑；

但是，我在将外部字体导入到项目时遇到问题。通过查看webpack.dev.config.js，我得到以下代码；

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

应捆绑字体。我在我的角度应用程序文件夹（.ttf）中有一个/ClientApp/fonts/Font.ttf文件；

然后在我的app.component.scss中，我尝试添加以下内容；

@import '../fonts/Font.ttf';

@font-face {
    font-family: MyFont;
    src: url("../fonts/Font.ttf") format("opentype");
}

但是，当我随后运行该网站时，字体文件出现404错误吗？ localhost/fonts/Font.tff

请问有人可以告诉我我在这里做错了什么吗？

Answer 1

将字体添加到angular.json下的styles：