0
私の設定は、React、jQuery、Bootstrap（すべてうまく動作します）のWebpack（v1。私はnpm i font-awesome -Sでフォントの素晴らしいを追加しようとしました。私はそれを自動的にロードするのが最善の解決策だと思います。これは私の設定ですWebpack（OTS解析エラー：無効なバージョンタグ）でFont-Awesomeをロード
Failed to decode downloaded font: http://localhost:3000/static/fontawesome-webfont.ttf?v=4.7.0
OTS parsing error: invalid version tag
：私は、各フォントファイルに対して次のと言って、ブラウザでコンソールのエラーを取得
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';
...次に、メインのApp.jsファイルにscssファイルをインポートします。
ご覧のとおり、私はfile-loaderとurl-loaderをフォントに使用しています。
static-urlで配信されるすべてのファイルの一覧を表示すると便利です。コンソールにその情報を出力する方法はありますか？問題がどこであっても見えにくいです。フォントがまったく読み込まれていない場合、または間違ったURLに読み込まれている場合。