在 Webpack 4 中使用 SCSS 中的字体答案

【问题标题】：Using Fonts in SCSS with Webpack 4在 Webpack 4 中使用 SCSS 中的字体
【发布时间】：2019-01-10 04:13:16
【问题描述】：

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

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

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

应该捆绑字体。我的 Angular 应用文件夹中有一个 .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

有人可以指导我这里做错了什么吗？

【问题讨论】：

【解决方案1】：

将字体添加到angular.json下styles:

【讨论】：