'Font awesome'合适的装载机来处理

Question

我正在尝试在我的 reactjs 应用程序中包含字体真棒，这些是我遵循的步骤。

1. npm install --save font-awesome
2. Import it to my jsx file
import '../../../../../../node_modules/font-awesome/css/font-awesome.min.css';
3. Adding url-loader to my webpack.config.js 
{
test: /.(woff|woff2|eot|ttf)(?.*$|$)/,
loader: 'url-loader?limit=100000'
}

但是我遇到了这个问题。我该如何解决这个问题？

../~/font-awesome/css/font-awesome.min.css 模块解析失败：C：\Users\admin\Documents\revegator-platformode_modules\font-awesome\css\font-awesome.min.css意外字符"@"(4：3( 您可能需要适当的加载程序来处理此文件类型。

My webpack.config.js

'use strict';
let path = require('path');
module.exports = {
entry: path.resolve('./src/main.js'),
output: {
path: path.resolve('../public/js'),
filename: 'build.js'
},
resolve: {
extensions: ['.js', '.jsx', '.json']
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test:  /.s[a|c]ss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
}
};

Answer 1

显然，您在应用程序中支持 sass，那么为什么不使用字体很棒的 scss 资源呢？这应该使您能够灵活地仅加载所需的内容，从而减小最终的 css 大小。

确保您有以下软件包

npm i --dev "css-loader" "file-loader" "node-sass" "sass-loader" "style-loader" "url-loader"

更新webpack.config.js以包含以下加载程序

{
test: /.s[a|c]ss$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "sass-loader"
}
]
},
{
test: /.(png|gif|jpg|cur)$/i,
loader: 'url-loader',
options: {
limit: 8192
}
},
{
test: /.woff2(?v=[0-9].[0-9].[0-9])?$/i,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff2'
}
},
{
test: /.woff(?v=[0-9].[0-9].[0-9])?$/i,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff'
}
},
{
test: /.(ttf|eot|svg|otf)(?v=[0-9].[0-9].[0-9])?$/i,
loader: 'file-loader'
}

在您的组件中

import 'font-awesome/scss/font-awesome.scss'