使用文件加载器和 webpack 的 eot 文件中的语法错误

Question

我正在尝试将 React Rainbow Components 与 Next.js (TypeScript) 结合使用，但我无法导入字体，因此我将 webpack 与 url-loader 结合使用。

出于某种原因，我一直收到错误 SyntaxError: Invalid or unexpected token error - D:\Git Repository\project\node_modules\react-rainbow-components\components\Application\fonts\Lato-Black\Lato-Black.eot:1 ��☺ 从他们的字体在 eot 文件中。

这是我在 next.config.js 中的 webpack 配置：

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({  
      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
      use: [
        {
          loader: 'url-loader?limit=100000'
        },
      ],
    })
    return config
  },
}

知道我做错了什么吗？还是字体本身有问题？

Answer 1

这个已经在版本中修复了，如果你将react-rainbow-components的版本更新到v1.24.1，字体会被移动到CDN。这是发行说明 https://github.com/nexxtway/react-rainbow/releases

使用文件加载器和 webpack 的 eot 文件中的语法错误

SyntaxError inside eot file with file-loader and webpack

urlloader

typescript

webpack

next.js

react-rainbow-components