Webpack 加载字体图标而不是字体本身

Question

我正在开发一个 flask-react 项目。我以前的框架上的反应前端很好，字体加载等等。不幸的是，一个核心错误导致它无法与 flask 后端通信。我有 designed/retooled 一个 webpack 框架来加载一个 html 文件，然后调用 bundle.js 。 This is an image of almost everything working, except for the fonts。

有趣的是，字体中的图标仍然可以正确加载。混淆我 webpack.config.js 中的字体文件导致它们显示为空的 unicode 框。这可能表明这是我的 CSS 中的一个错误，Arial 字体以某种方式覆盖了我导入的 Nucleo Outline 字体，但相同的 css 在以前的框架中工作。

这是我的 webpack.config.js:

const webpack = require('webpack');
const resolve = require('path').resolve;
const config = {
     mode: process.env.NODE_ENV,
     devtool: 'eval-source-map',
     entry: __dirname + '/src/index.jsx',
     output: {
               path: resolve('../public/bundle/'),
               filename: 'bundle.js',
               publicPath: resolve('../public/bundle/')
     },
     resolve: {
               extensions: ['.js','.jsx','.css','.scss','.png','.jpg','.jpeg','.gif'],
     },
     module: {
           rules: [
                        {
                        test: /\.jsx?/,
                        loader: 'babel-loader',
                        exclude: /node_modules/,
                        query: {
                                presets: ['@babel/react','@babel/env']
                          }
                            },
                            {
                                test: /\.css$/i,
                                use: [
                                    // Creates `style` nodes from JS strings
                                    'style-loader',
                                    // Translates CSS into CommonJS
                                    'css-loader'
                                ],
                            },
                            {
                                test: /\.scss$/i,
                                use: [
                                    // Creates `style` nodes from JS strings
                                    'style-loader',
                                    // Translates CSS into CommonJS
                                    'css-loader',
                                    // Compiles Sass to CSS
                                    'sass-loader',
                                ],
                            },
                            {
                                test: /\.(png|jpe?g|gif)$/i,
                        loader: 'url-loader',
                                options: {
                      esModule: false,
                    },
                            },
                            {
                                test: /\.(ttf|woff|woff2|eot|otf)$/i,
                        loader: 'url-loader',
                            },
                ],
        },
        devServer: {
            historyApiFallback: true,
      }
};


module.exports = config;

This is my file structure.

此外，flask 和 JS 控制台都不会出现任何错误。

This is a more in-depth structure of the assets file, including fonts.

我不知道为什么会这样。任何帮助将不胜感激，我可以添加任何信息。我基本上什么都试过了。 file-loader 不起作用（flask 无法提取资产，并且无法再找到图标）。由于同样的原因，ttf-loader 也不起作用。

Answer 1

我明白了。 CSS 的 font-family 属性中有一个列表。它默认为 Arial，列表中的最后一项。我只需要在 index.html

的层次结构中为更高层次的其他字体添加一个导入

Webpack 加载字体图标而不是字体本身

Webpack loading font icons but not font itself

javascript

css

fonts

reactjs

webpack