无法使用webpack-4文件加载程序导入字体面板

Question

我正试图使用webpack file-loader将一个字体系列导入到我的react应用程序中，我一直收到以下错误：

未找到

模块:错误:无法解决。/字体/Gilroy-粗体/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/和许多其他的文章..。

Answer 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(../../)，但都不管用.