Question

我使用npm install font-awesome --save-dev安装了font-awesome，现在我在我的项目中遇到麻烦了。以下是我的代码。

webpack.config.js

{
            test: /\.(svg|woff|woff2|ttf|eot|otf)$/,
            loader: 'file-loader?name=assets/[name].[ext]',
}

app.scss

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";

错误

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 模块解析失败：/ProjectSite/node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0意外字符＆＃39;�＆＃39; （1：1）您可能需要适当的加载程序来处理此文件类型。

Answer 1

通过阅读做一些研究，我最终通过在正则表达式部分添加（[\？]？。*）$ 来解决它。

{
     test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,
     loader: 'file-loader?name=assets/fonts/[name].[ext]',
}

Answer 2

您是否安装了npm文件加载程序包？

npm install --save-dev file-loader

我有一个webpack示例存储库，其中包含font-awesome。它可能有所帮助。你可以找到它here

Answer 3

您可能想尝试使用新的 webpack 版本

{
    test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,
    use: [
        {
            loader: 'file-loader?name=assets/fonts/[name].[ext]'
        }
    ]
}

如何使用webpack

3 个答案: