Webpack：导入 font-awesome 失败，因为找不到字体

Question

我正在使用 NPM 的 font-awesome 并尝试将其与 webpack 一起使用。但是，我收到无法找到字体的错误。字体位于 ~/Projects/GrailLuck/node_modules/font-awesome/fonts.

下

我在 sass 文件中导入 font-awesome，如下所示：

@import "~font-awesome/css/font-awesome";

我的装载机：

loaders: [
{
    test: /\.js$/,
    exclude: /node_modules|app.js/,
    loader: "babel-loader",
    query: {
      presets: ['es2015']
    }
},
{
    test: /\.scss$/,
    exclude: /node_modules/,
    include: [ path.resolve(__dirname, "src", "sass") ],
    loader: 'style!css!sass?includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib')
},
{
    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&mimetype=application/font-woff"
},
{
    test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&mimetype=application/font-woff"
},
{
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&mimetype=application/octet-stream"
},
{
    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
    loader: "file"
},
{
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&mimetype=image/svg+xml"
}]

这是我遇到的错误：

ERROR in ./~/css-loader!./~/sass-loader?includePaths[]=/home/spock/Projects/GrailLuck/web/~/compas
s-mixins/lib!./src/sass/app.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.svg in /home/spo
ck/Projects/GrailLuck/web/src/sass
 @ ./~/css-loader!./~/sass-loader?includePaths[]=/home/spock/Projects/GrailLuck/web/~/compass-mixi
ns/lib!./src/sass/app.scss 6:10469-10520

有多个与上述相同的错误。每种字体类型一个。

有什么想法可以让它发挥作用吗？

Answer 1

我发现有一个包叫 font-awesome-sass-loader。完美运行，不会像网络上的其他解决方案那样让人感觉很老套。

Webpack：导入 font-awesome 失败，因为找不到字体

Webpack: Importing font-awesome fails because it can't find the fonts

sass

font-awesome

webpack