如何将字体添加到 webpack 构建？

Question

如何将字体添加到 webpack 项目中？我简直不敢相信，在浏览了十几个 webpack 指南后，我仍然找不到添加字体的实际解决方案。我没有使用 React，我使用的是可以在此处找到的样板文件：https://github.com/sandrina-p/essential-webpack-boilerplate

文件夹结构如下：

src
|-fonts
|-scripts
|-styles
index.thml

我已将以下内容添加到我的配置文件中：

{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    loader: 'file-loader?name=/fonts/[name].[ext]'
},

我正在 css 中导入字体系列，如下所示：

@font-face {
  font-family: 'MPR' !important;
  src: url('/styles/MPR.ttf') format('ttf'),
}



h2 {
    font-family: 'MPR';
}

我没有收到任何错误，只是 h2 标签不显示字体，默认为 times new roman。任何见解将不胜感激，我真的不想为了使用字体而在 gulp 中重建我的整个项目。

Answer 1

我猜你需要为 url

添加相对路径而不是绝对路径

https://survivejs.com/webpack/loading/fonts/index.html#integrating-font-awesome-to-the-project

如何将字体添加到 webpack 构建？

How to add a font to webpack build?

fonts

webpack

webpack-2

webpack-loader