javascript - font-face Styled 组件 - OTS 解析错误 : invalid version tag

Question

我正在尝试将几种本地字体添加到新网站。字体似乎已正确下载，字体定义如下:

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto-mono-v5-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto Mono'), local('RobotoMono-Regular'),
     url('/fonts/roboto-mono-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('/fonts/roboto-mono-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
     url('/fonts/roboto-mono-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
     url('/fonts/roboto-mono-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
     url('/fonts/roboto-mono-v5-latin-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */
}

但我仍然收到以下错误:

你可以查看我的webpack配置 here .

这是一个公共(public)仓库，在本地运行项目时可以重现该问题:

1. 克隆:git clone -b feature/font-faces https://github.com/webmadeira/webmadeira.github.io.git

2. 安装依赖:npm install

3. 运行项目:npm start

Answer 1

解决方案是更改我的 webpack 配置:

{
  test: /.(png|jpg|jp(e)?g|svg)(\?[a-z0-9]+)?$/,
  use: {
    loader: 'file-loader',
    options: {
      publicPath: 'images',
      name: '/[name].[ext]',
    },
  },
},

收件人:

{
  test: /.(png|jpg|jp(e)?g|svg)(\?[a-z0-9]+)?$/,
  use: {
    loader: 'file-loader',
    options: {
      name: 'images/[name].[ext]',
    },
  },
},