Mein Setup ist ein einfaches Webpack (v1.) Mit React, jQuery und Bootstrap (alles funktioniert gut). Ich habe versucht, font-awesome via npm i font-awesome -S hinzuzufügen. Ich nehme an, die beste Lösung wäre, es automatisch zu laden. Ich bekomme nur eine Konsole Fehler im Browser die folgende für jede Schriftart-Datei zu sagen:Lade Font-Awesome mit Webpack (OTS Parsing Fehler: ungültiges Versionstag)
Failed to decode downloaded font: http://localhost:3000/static/fontawesome-webfont.ttf?v=4.7.0
OTS parsing error: invalid version tag
Das ist mein Setup ist:
webpack.config
...
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'http://localhost:3000/static/'
},
module: {
loaders: [
....
{
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"
}
]
},
...
app.scss
$fa-font-path: 'http://localhost:3000/static';
@import '../../node_modules/font-awesome/scss/font-awesome.scss';
... und dann importiere ich die scss-Datei in die App.js-Hauptdatei.
Wie Sie sehen können, verwende ich file-loader und url-loader für die Schriftarten.
Es wäre nett, eine Liste aller Dateien zu sehen, die in der static -url geliefert werden, gibt es eine Möglichkeit, diese Informationen in der Konsole auszugeben? Es ist schwer zu sehen, wo das Problem ist. Wenn die Schriften nicht oder nur mit der falschen URL geladen sind.