Значки AG Grid React не отображаются должным образом после обновления - PullRequest
0 голосов
/ 01 мая 2020

Мы недавно обновили сетку ag 20.1.0 до 23.0.2. Мы используем веб-пакет для связывания нашего кода, и после обновления, когда мы строим наш код в «производственном» режиме, значки отображаются некорректно (см. Ниже).

enter image description here

Если мы запускаем сборку локально в режиме «разработки», у нас нет проблем. При чтении некоторых журналов изменений, похоже, что сетка ag перешла из значков svg в веб-шрифты и выглядит так, как будто значки теперь встроены в css .... по крайней мере, это мое понимание. Очевидно, это как-то связано с тем, как мы настроили веб-пакет, но я не могу понять, что делаю неправильно. Ниже приведен наш 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']
      },

но это не принесло пользы.

1 Ответ

0 голосов
/ 03 мая 2020

Ну, после бесчисленных часов попыток выяснить проблему, дело дошло до простого решения. все, что мне нужно было сделать, это добавить <meta charset="utf-8" /> в мой индекс. html <head> и так все иконки выглядели так, как ожидалось.

...