javascript - Webpack 加载字体图标但不加载字体本身

问题描述

我有一个正在开发的烧瓶反应项目。我以前的框架上的反应前端很好，字体加载等等。不幸的是，一个核心错误导致它无法与烧瓶后端通信。我设计/改造了一个 webpack 框架来加载一个调用 bundle.js 的 html 文件，然后调用它。这是几乎所有工作的图像，除了字体。

有趣的是，字体中的图标仍然可以正常加载。混淆我的字体文件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;

这是我的文件结构。

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

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

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

标签： javascriptcssreactjswebpackfonts

javascript - Webpack 加载字体图标但不加载字体本身

问题描述

解决方案

推荐阅读