升级后 AG Grid React 图标无法正确显示

Question

我们最近从 ag grid 20.1.0 升级到了 23.0.2。我们使用 webpack 来捆绑我们的代码，并且自从我们在 "production" 模式下构建代码时升级后，图标显示不正确（见下文）。

如果我们运行在本地以 "development" 模式构建，我们没有问题。在阅读一些更改日志时，看起来 ag 网格从 svg 图标变成了 webfonts，并且图标现在看起来像嵌入在 css 中......至少这是我的理解。显然，这与我们配置 webpack 的方式有关，但就我的生活而言，我无法弄清楚我做错了什么。下面是我们的webpack.config.js。我们正在使用 Sencha Extreact 工具集，但到目前为止这还不是问题。

require('dotenv').config()
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtWebpackPlugin = require('@sencha/ext-webpack-plugin');
const portfinder = require('portfinder');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = function (env) {
  function get(it, val) {if(env == undefined) {return val} else if(env[it] == undefined) {return val} else {return env[it]}}

  var profile     = get('profile',     '')
  var environment = get('environment', 'development')
  var treeshake   = get('treeshake',   'no')
  var browser     = get('browser',     'yes')
  var watch       = get('watch',       'yes')
  var verbose     = get('verbose',     'no')
  var useConfig   = get('useConfig',  'default')

  const isProd = environment === 'production'
  const outputFolder = 'build'
  portfinder.basePort = (env && env.port) || 8080

  return portfinder.getPortPromise().then(port => {
    const plugins = [
      new webpack.EnvironmentPlugin({
        NODE_ENV: environment, // use 'development' unless process.env.NODE_ENV is defined
      }),
      new HtmlWebpackPlugin({template: "index.html",hash: true,inject: "body"}),
      new HtmlWebpackPlugin({template: "../silent_renew/silent_renew.html", filename: "silent_renew.html", inject: 'body'}),
      new ExtWebpackPlugin({
        framework: 'react',
        toolkit: 'modern',
        theme: 'gt-theme',
        emit: 'yes',
        script: '',
        port: port,
        packages: [
          'treegrid',
          'd3'
        ],
        profile: profile, 
        environment: environment,
        treeshake: treeshake,
        browser: browser,
        watch: watch,
        verbose: verbose
      }),
      new CopyWebpackPlugin([
        { from: 'web.config' },
        { from: './_assets/icons/inv.png', to: 'resources/images' },
      ])
    ]
    return {
      mode: environment,
      devtool: (environment === 'development') ? 'inline-source-map' : false,
      context: path.join(__dirname, './src'),
      entry: {
          app: './index.js',
          silentRenew: "../silent_renew/index.js"
      },
      output: {
        path: path.join(__dirname, outputFolder),
        filename: "[name].js"
      },
      plugins: plugins,
      module: {
        rules: [
          { test: /\.(js)$/, exclude: /node_modules/, use: ['babel-loader'] },
          { test: /\.(html)$/,use: { loader: 'html-loader' } },
          {
            test: /\.(css|scss)$/,
            use: [
              {
                loader: 'style-loader'
              },
              {
                loader: 'css-loader'
              },
              {
                loader: 'sass-loader'
              }
            ]
          },
          {
            test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    name: './assets/fonts/[name].[ext]',
                    limit: 100000,
                }
            }]
          },
          {
              test: /\.(png|jpg)$/,
              loader: 'url-loader',
              options: {
                  name: './assets/icons/[name].[ext]',
                  limit: 100000,
              }
          }
        ]
      },
      externals: {
        'Config': (useConfig === 'default' ? JSON.stringify(require('./config.json')) 
                                          : JSON.stringify(require('./config.localapi.json')))
      },
      performance: { hints: false },
      stats: 'none',
      optimization: { noEmitOnErrors: true },
      node: { fs: 'empty' },
      devServer: {
        contentBase: outputFolder,
        hot: !isProd,
        historyApiFallback: true,
        host: '0.0.0.0',
        port: port,
        disableHostCheck: false,
        compress: isProd,
        inline:!isProd,
        stats: 'none'
      }
    }
  })
}

更新：

一些附加信息，在 20.1.0 中，我们使用以下导入语句导入 css：

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-material.css';

对于 23.0.2，我们现在导入如下：

import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-material.css';

我试过解析配置：

resolve: {
        alias: {
            "@ag-grid-community/core": path.resolve('./node_modules/@ag-grid-community/core'),
            react: path.resolve('./node_modules/react')
        },
        extensions: ['.js', '.jsx']
      },

但这似乎没有任何好处。

Answer 1

经过无数小时的努力找出问题，最终归结为一个简单的修复。我所要做的就是在我的 index.html <head> 中添加 <meta charset="utf-8" /> 这样所有图标都会按预期显示。

升级后 AG Grid React 图标无法正确显示

AG Grid React icons not showing properly after upgrade

webpack

ag-grid-react