Webpack: Das Importieren von font-awesome schlägt fehl, weil es die Schriftarten nicht finden kann

Question

Ich benutze Font-awesome von NPM und versuche, es mit Webpack zu verwenden. Aber ich bekomme einen Fehler, dass die Schriftarten nicht gefunden werden können. Die Schriftarten befinden sich unter ~/Projects/GrailLuck/node_modules/font-awesome/fonts.

ich importieren font-awesome in meiner sass Datei wie folgt:

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

Mein Lader:

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" 
}] 

Und hier ist der Fehler Ich erhalte:

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 

Es gibt mehrere Fehler wie oben. Eine für jede Schriftart.

Irgendwelche Ideen, wie das funktioniert?

Answer 1

Ich fand heraus, es gibt ein Paket namens font-awesome-sass-loader. Funktioniert perfekt und fühlt sich nicht haschisch wie andere Lösungen im Internet.