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

Question

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

Module not found: Error: Can't resolve './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/ 和很多其他文章...

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(../../) 但 none 有效...

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

Can’t import font-face using webpack-4 file-loader

webpack

webpack-4