Webpack 加载字体图标，但不加载字体本身

Question

我有一个正在开发的烧瓶反应项目。我以前的框架上的react前端很好，字体加载和所有。不幸的是，一个核心错误使它无法与烧瓶后端通信。我已经设计/重新配置了一个webpack框架来加载一个html文件，该文件调用一个捆绑包.js然后调用。这是几乎所有工作的图像，除了字体。

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

这是我的：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'

                                ],

                            },

这是我的文件结构。

此外，烧瓶和JS控制台都不会拉取任何错误。

这是资产文件（包括字体）的更深入的结构。

我不知道为什么会发生这种情况。任何帮助将不胜感激，我可以添加任何信息。我基本上已经尝试了一切。 不起作用（烧瓶在拉取资源时遇到问题，无法再找到图标）。ttf-loader也因为同样的原因而不起作用。file-loader

Answer 1

我想通了。CSS的属性中有一个列表。它默认为Arial，这是列表中的最后一项。我只需要为层次结构中更高的其他字体添加导入font-familyindex.html