Question

我有一个使用svg的webpack项目。某些内联svg文件已正确翻译，但来自font-awesome的文件不是。

我导入字体很棒：

import 'font-awesome-webpack';

在webpack方面，我有：

{
    test: /\.svg$/,
    loaders: [
        'babel-loader',
        {
            loader: 'react-svg-loader',
            query: {
                jsx: true,
            },
        },
    ],
}],

这样可以正常工作但显示正方形而不是字体很棒的图标。现在遵循其他修复方法，我应该为其他非内联SVG添加一个加载程序配置，例如：

{ 
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: "url-loader?limit=10000&mimetype=application/font-woff" 
},
{ 
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: "file-loader"
}

只要我添加上述行并尝试启动项目，就会显示以下错误：

Uncaught (in promise) Error: Invalid tag:/f01bf49c263128347d1c47cdc55eff66.svg

问题显然来自于我在wbepack配置之后加载Svgs的方式，但无论我导入svgs的方式不同，同样的错误仍然会破坏我的项目。

两个webpack配置是否可能产生冲突？我的webpack配置出了什么问题？

Answer 1

FYI解决方案是：

webpack配置文件：

 {
  test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  loader: 'url-loader?limit=10000&mimetype=application/font-woff',
}, {
  test: /\.(ttf|otf|eot|svg)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/,
  use: [{
    loader: 'file-loader',
    options: {
      outputPath: 'fonts',
      publicPath: 'fonts',
    },
  }],
},

导入SVG文件 - 使用Webpack进行font-awesome

1 个答案: