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