Webpack：フォントを見つけることができないため、フォントの読み込みに失敗する

Question

私はNPMからfont-awesomeを使用しており、webpackと共に使用しようとしています。しかし、フォントが見つからないというエラーが表示されます。フォントは~/Projects/GrailLuck/node_modules/font-awesome/fontsの下にあります。

私はそうのように私のSASSファイルにフォント素晴らしいインポート：

@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 

上記と同じ複数のエラーがあります。各フォントタイプに1つ。

どのようにすればよいでしょうか？

Answer 1

font-awesome-sass-loaderというパッケージがあります。完璧に動作し、Web上の他のソリューションと同様にハックを感じません。