Webpack 加载字体图标但不加载字体本身答案

【问题标题】：Webpack loading font icons but not font itselfWebpack 加载字体图标但不加载字体本身
【发布时间】：2020-09-07 09:42:18
【问题描述】：

我正在开发一个烧瓶反应项目。我以前的框架上的反应前端很好，字体加载等等。不幸的是，一个核心错误导致它无法与烧瓶后端通信。我已经设计/重组了一个 webpack 框架来加载一个调用 bundle.js 的 html 文件，然后调用它。 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 也因为同样的原因不能工作。

【问题讨论】：

标签： javascript css reactjs webpack fonts

【解决方案1】：

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

【讨论】：