Closed sushengren closed 1 year ago
TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成,可以尝试下方案,官方员会在一定时间后继续继续处理。
看到截图可以看到样式错乱,但是比较难确认具体是什么导致的,我给你提供几个方案,你可以挨个尝试解决:
sourcemap
查看生成的样式是否有问题,可通过 .umirc.ts
文件的 devtool
字段来配置,亦可通过配置 webpack.config.js
文件来开启。if (NODE_ENV === 'production') {
config.devtool = 'none';
} else {
config.devtool = 'cheap-module-source-map';
}
antd
是按需加载的,以避免不必要的文件过大。你可以通过 AntdConfigPlugin
构建需要编译的组件类型。import AntdConfigPlugin from 'antd-config-webpack-plugin';
export default {
plugins: [
new AntdConfigPlugin({
moduleType: 'esm',
enterFile: 'index.tsx'
})
]
};
less
,就要确认是否正确支持了它,应考虑使用支持样式解决方案提取的样式。import themeConfig from './theme';
export default {
theme: themeConfig,
plugins: [
[
'umi-plugin-react',
{
antd: true,
dva: true,
dynamicImport: {
loadingComponent: './components/PageLoading/index',
webpackChunkName: true,
level: 3
},
title: 'Ant Design Pro',
dll: true,
pwa: false,
locale: {
enable: true,
default: 'zh-CN',
baseNavigator: true
},
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: themeConfig
}
}
]
]
};
import { Button } from 'antd'; // instead of this
import Button from 'antd/lib/button'; // use this
import 'antd/lib/button/style';
TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成,可以尝试下方案,官方员会在一定时间后继续继续处理。
目前的粗略判断,可能是暂存文件、配置文件、环境变量等问题导致的,也可以通过以下方法予以排查:
清空缓存 - 试着清空浏览器缓存、打包缓存等,然后再次打包
逐个文件检查 - 逐个文件检查,看是否漏掉了样式文件、其他资源文件等
检查环境 - 检查开发时与当前环境是否一致,检查配置、环境变量等。可以检查 env
、mode
、publicpath
等。
以上是一些可能会导致样式文件错乱的排查方案,如果需要进一步的帮助,可以尝试提供更多的代码和细节以更准确地了解问题。
🧐 问题描述
使用LoginForm在开发状态下显示正常,build后样式出错
💻 示例代码
🚑 其他信息