无法使用 webpack-4 文件加载器导入字体答案

【问题标题】：Can’t import font-face using webpack-4 file-loader无法使用 webpack-4 文件加载器导入字体
【发布时间】：2020-03-17 09:25:23
【问题描述】：

我正在尝试使用 webpack file-loader 将字体系列导入我的 React 应用程序，但我不断收到此错误：

找不到模块：错误：无法解析 './fonts/gilroy-bold/Gilroy-Bold.woff2'

我试过url-loader，但还是一样。

这是我的文件结构：

src
├── assets
│   ├── fonts
│   │   └── gilroy-bold
│   │       ├── Gilroy-Bold.woff
│   │       └── Gilroy-Bold.woff2
│   ├── scss
│   │     └── 00_settings
│   │         └── _settings.fonts.scss

Webpack 代码：

{
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    loader: 'file-loader',
    options: {
      outputPath: 'dist/fonts' 
    }
}

CSS：

@font-face {
  font-family: "Gilroy-Bold";
  src: url("./fonts/gilroy-bold/Gilroy-Bold.woff2"),
       url("./fonts/gilroy-bold/Gilroy-Bold.woff");
}

$font-family-accent: 'Gilroy-Bold';

我尝试关注这篇文章：https://survivejs.com/webpack/loading/fonts/ 和很多其他文章...

【问题讨论】：

您能否扩展您收到的错误消息，webpack 找不到加载字体的模块或找不到字体？
我更新了错误信息。好像webpack找不到字体了……
我认为是 CSS 的 url 问题。编辑：啊，是的，确实看到了你的答案！
我相信这取决于 webpack 构建的结构是如何制作的，以及 css 文件和字体在构建后如何相互关联。

标签： webpack webpack-4

【解决方案1】：

已解决！问题出在 CSS 字体路径中，这对于文件结构来说很奇怪......

@font-face {
  font-family: "Gilroy-Bold";
  src: url("../fonts/gilroy-bold/Gilroy-Bold.woff2"),
       url("../fonts/gilroy-bold/Gilroy-Bold.woff");
}

url(./) 和 url(../../) 我都试过了，但都没有用...

【讨论】：