🧐[问题] 使用LoginForm在开发状态下显示正常，build后样式出错

[sushengren]

🧐 问题描述

使用LoginForm在开发状态下显示正常，build后样式出错

💻 示例代码

    <div className={styles.body}>
      <div style={{paddingTop: 130}}>
        <LoginForm<OauthLoginQuery>
          title='哈嘶喵'
          subTitle='全球最大的宠物托管平台'
          logo='https://github.githubassets.com/images/modules/logos_page/Octocat.png'
          onFinish={param => login(param).then(async vo => {
            localStorage.setItem("token", vo.token!);
            await refresh();
            history.push('/');
          })}
        >
          <ProFormText
            name='username'
            placeholder='用户名'
            fieldProps={{size: 'large', prefix: <UserOutlined className={'prefixIcon'} />}}
            rules={[{required: true, message: '请输入用户名!'}]}
          />
          <ProFormText.Password
            name='password'
            placeholder='密码'
            fieldProps={{size: 'large', prefix: <LockOutlined className={'prefixIcon'} />}}
            rules={[{required: true, message: '请输入密码！'}]}
          />
          <div style={{marginBlockEnd: 24}}>
            <ProFormCheckbox noStyle fieldProps={{checked: true}} name='autoLogin'>自动登录</ProFormCheckbox>
            <a style={{float: 'right'}}>忘记密码</a>
          </div>
        </LoginForm>
      </div>
    </div>

🚑 其他信息

  "dependencies": {
    "@ant-design/pro-components": "^2.3.57",
    "@ant-design/pro-layout": "^7.8.2",
    "ahooks": "^3.7.4",
    "react": "17.x",
    "react-dom": "17.x",
    "umi": "^3.5.37"
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@umijs/plugin-qiankun": "^2.42.0",
    "@umijs/preset-react": "1.x",
    "@umijs/test": "^3.5.37",
    "lint-staged": "^10.0.7",
    "prettier": "^2.2.0",
    "typescript": "^4.1.2",
    "yorkie": "^2.0.0"
  }

[github-actions[bot]]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [#6661][🧐[问题] 使用LoginForm在开发状态下显示正常，build后样式出错][100%]

[chenshuai2144]

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 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

看到截图可以看到样式错乱，但是比较难确认具体是什么导致的，我给你提供几个方案，你可以挨个尝试解决：

1. 开启 sourcemap - 通过开启 sourcemap 查看生成的样式是否有问题，可通过 .umirc.ts 文件的 devtool 字段来配置，亦可通过配置 webpack.config.js 文件来开启。

if (NODE_ENV === 'production') {
  config.devtool = 'none';
} else {
  config.devtool = 'cheap-module-source-map';
}

2. 按需加载 - 确保你的 antd 是按需加载的，以避免不必要的文件过大。你可以通过 AntdConfigPlugin 构建需要编译的组件类型。

import AntdConfigPlugin from 'antd-config-webpack-plugin';

export default {
  plugins: [
    new AntdConfigPlugin({
      moduleType: 'esm',
      enterFile: 'index.tsx'
    })
  ]
};

3. 提取样式 - 如果你使用了 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
        }
      }
    ]
  ]
};

4. 引用问题 - 若你使用的是在深层级别引用，参与解决方案的片段是否引用。

import { Button } from 'antd'; // instead of this
import Button from 'antd/lib/button'; // use this
import 'antd/lib/button/style';

[chenshuai2144]

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 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

目前的粗略判断，可能是暂存文件、配置文件、环境变量等问题导致的，也可以通过以下方法予以排查：

1. 清空缓存 - 试着清空浏览器缓存、打包缓存等，然后再次打包

2. 逐个文件检查 - 逐个文件检查，看是否漏掉了样式文件、其他资源文件等

3. 检查环境 - 检查开发时与当前环境是否一致，检查配置、环境变量等。可以检查 env、mode、publicpath等。

以上是一些可能会导致样式文件错乱的排查方案，如果需要进一步的帮助，可以尝试提供更多的代码和细节以更准确地了解问题。

[chenshuai2144]

https://github.com/ant-design/pro-components/issues/6708

也试试这个