Webpack 加載字體圖標但不加載字體本身

Question

我有一個正在開發的燒瓶反應項目。 我以前的框架上的反應前端很好，字體加載等等。 不幸的是，一個核心錯誤導致它無法與 flask 后端通信。 我設計/重組了一個 webpack 框架來加載一個 html 文件，然后調用 bundle.js 。 這是幾乎所有工作的圖像，除了 fonts 。

有趣的是，字體中的圖標仍然可以正常加載。 混淆我的webpack.config.js中的字體文件會導致它們顯示為空的 unicode 框。 這可能表明這是我的 CSS 中的一個錯誤，Arial 字體以某種方式覆蓋了我導入的 Nucleo Outline fonts，但相同的 ZC7A628CBA22E28EB17B5F5C6AE2A26AZ 可以在之前的框架中使用。

這是我的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;

這是我的文件結構。

此外，flask 和 JS 控制台都不會出現任何錯誤。

這是資產文件的更深入結構，包括 fonts 。

我不知道為什么會這樣。 任何幫助將不勝感激，我可以添加任何信息。 我基本上什么都試過了。 file-loader不起作用（flask 無法提取資產，並且無法再找到圖標）。 ttf-loader 也出於同樣的原因也不起作用。

Answer 1

我想到了。 CSS 在其font-family屬性中有一個列表。 它默認為 Arial，列表中的最后一項。 我只需要在我的index.html的層次結構中為其他 fonts 添加導入