px2rem在针对Modal时并不生效，同时也会导致按钮的样式由rem变回px.

[feiafei]

          px2rem在针对Modal时并不生效，同时也会导致按钮的样式由rem变回px.

Originally posted by @YuYongzhi in #6817 (comment)

[github-actions]

Hello @feiafei, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue, thank you!

你好 @feiafei，为了能够进行高效沟通，我们对 issue 有一定的格式要求，你的 issue 因为不符合要求而被自动关闭。你可以通过 issue 助手 来创建 issue 以方便我们定位错误。谢谢配合！

[akai-b]

我也遇到同样问题，请问你有解决了吗？

[wxlzmt]

我也遇到同样问题，请问你有解决了吗？

我有办法

建个文件 generate.js ，内容如下：

// import { extractStyle } from 'ant-design-vue/lib/_util/static-style-extract/index.js'; // 使用import需要package.json的type=module, 但是改完之后项目内的eslint.js等配置文件坏了; 所以还是用require就行
// import extractStyle from '@ant-design/static-style-extract'; // 需要react,用不了

const fs = require('fs');
const { createVNode } = require('vue');
const path = require('path');
const { extractStyle } = require('ant-design-vue/lib/_util/static-style-extract');
const { StyleProvider } = require('ant-design-vue');
const { ConfigProvider } = require('ant-design-vue');

const filePath = path.resolve(__dirname, 'antd.css');
console.log(`输出css文件路径 ${filePath} \n`);

// ts type 对应 import { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
// 设置主题, 按需修改此处
const configProviderTheme = { token: { colorPrimary: '#0052CB' } };

const configProviderProps = { theme: configProviderTheme };
const styleProviderProps = {};

// API 文档 https://www.antdv.com/docs/vue/ssr-extract-ssr-cn
const css = extractStyle(node =>
  createVNode(StyleProvider, styleProviderProps, () => createVNode(ConfigProvider, configProviderProps, () => node)),
);

// 清理掉 hashPrefix
const result = css
  .replace(/:where\(\.css-dev-only-do-not-override-[A-Za-z0-9]+\)/gim, '') // 清理掉 hashPrefix
  .replace(/css-dev-only-do-not-override-/gim, 'c-'); // 针对 animation-name , 缩短一点, 也可以不替换

fs.writeFileSync(filePath, result, { encoding: 'utf-8', flag: 'w' });

console.log(
  `用法: 在vue的入口文件main.ts 中 import '@/路径略/antd.css' 即可, 如果项目中有用到 px转rem 或 px转vw 插件, 则会自动对antd.css二次处理, 相当于是ant-design-vue-3.x以及之前版本的css全局引入.\n`,
);
console.log(
  `注意: 本方案无法阻止 ant-design-vue-4.x 运行时产生的动态css, 但是因为移除了:where(), 所以本方案产生的antd.css的优先级高于运行时产生的css, 所以才会有效\n`,
);
console.log('success');

在命令行执行 node generate.js ， 产物是 antd.css ，全局引入即可

[nanvon]

@tangjinzhou 大佬请问这个问题会修复吗

[lfzs]

我也遇到同样问题，请问你有解决了吗？

我有办法

建个文件 generate.js ，内容如下：

// import { extractStyle } from 'ant-design-vue/lib/_util/static-style-extract/index.js'; // 使用import需要package.json的type=module, 但是改完之后项目内的eslint.js等配置文件坏了; 所以还是用require就行
// import extractStyle from '@ant-design/static-style-extract'; // 需要react,用不了

const fs = require('fs');
const { createVNode } = require('vue');
const path = require('path');
const { extractStyle } = require('ant-design-vue/lib/_util/static-style-extract');
const { StyleProvider } = require('ant-design-vue');
const { ConfigProvider } = require('ant-design-vue');

const filePath = path.resolve(__dirname, 'antd.css');
console.log(输出css文件路径 ${filePath} \n);

// ts type 对应 import { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
// 设置主题, 按需修改此处
const configProviderTheme = { token: { colorPrimary: '#0052CB' } };

const configProviderProps = { theme: configProviderTheme };
const styleProviderProps = {};

// API 文档 https://www.antdv.com/docs/vue/ssr-extract-ssr-cn
const css = extractStyle(node =>
createVNode(StyleProvider, styleProviderProps, () => createVNode(ConfigProvider, configProviderProps, () => node)),
);

// 清理掉 hashPrefix
const result = css
.replace(/:where(.css-dev-only-do-not-override-[A-Za-z0-9]+)/gim, '') // 清理掉 hashPrefix
.replace(/css-dev-only-do-not-override-/gim, 'c-'); // 针对 animation-name , 缩短一点, 也可以不替换

fs.writeFileSync(filePath, result, { encoding: 'utf-8', flag: 'w' });

console.log(
用法: 在vue的入口文件main.ts 中 import '@/路径略/antd.css' 即可, 如果项目中有用到 px转rem 或 px转vw 插件, 则会自动对antd.css二次处理, 相当于是ant-design-vue-3.x以及之前版本的css全局引入.\n,
);
console.log(
注意: 本方案无法阻止 ant-design-vue-4.x 运行时产生的动态css, 但是因为移除了:where(), 所以本方案产生的antd.css的优先级高于运行时产生的css, 所以才会有效\n,
);
console.log('success');
在命令行执行 node generate.js ， 产物是 antd.css ，全局引入即可

或者关闭客户端和服务端的 ConfigProvider theme 的 hashed。让客户端渲染和 extractStyle 获取的 css 都保持一致，就不需要手动 repalce

[wxlzmt]

我也遇到同样问题，请问你有解决了吗？

我有办法
建个文件 generate.js ，内容如下：
// import { extractStyle } from 'ant-design-vue/lib/_util/static-style-extract/index.js'; // 使用import需要package.json的type=module, 但是改完之后项目内的eslint.js等配置文件坏了; 所以还是用require就行
// import extractStyle from '@ant-design/static-style-extract'; // 需要react,用不了
const fs = require('fs');
const { createVNode } = require('vue');
const path = require('path');
const { extractStyle } = require('ant-design-vue/lib/_util/static-style-extract');
const { StyleProvider } = require('ant-design-vue');
const { ConfigProvider } = require('ant-design-vue');
const filePath = path.resolve(__dirname, 'antd.css');
console.log(输出css文件路径 ${filePath} \n);
// ts type 对应 import { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
// 设置主题, 按需修改此处
const configProviderTheme = { token: { colorPrimary: '#0052CB' } };
const configProviderProps = { theme: configProviderTheme };
const styleProviderProps = {};
// API 文档 https://www.antdv.com/docs/vue/ssr-extract-ssr-cn
const css = extractStyle(node =>
createVNode(StyleProvider, styleProviderProps, () => createVNode(ConfigProvider, configProviderProps, () => node)),
);
// 清理掉 hashPrefix
const result = css
.replace(/:where(.css-dev-only-do-not-override-[A-Za-z0-9]+)/gim, '') // 清理掉 hashPrefix
.replace(/css-dev-only-do-not-override-/gim, 'c-'); // 针对 animation-name , 缩短一点, 也可以不替换
fs.writeFileSync(filePath, result, { encoding: 'utf-8', flag: 'w' });
console.log(
用法: 在vue的入口文件main.ts 中 import '@/路径略/antd.css' 即可, 如果项目中有用到 px转rem 或 px转vw 插件, 则会自动对antd.css二次处理, 相当于是ant-design-vue-3.x以及之前版本的css全局引入.\n,
);
console.log(
注意: 本方案无法阻止 ant-design-vue-4.x 运行时产生的动态css, 但是因为移除了:where(), 所以本方案产生的antd.css的优先级高于运行时产生的css, 所以才会有效\n,
);
console.log('success');
在命令行执行 node generate.js ， 产物是 antd.css ，全局引入即可

或者关闭客户端和服务端的 ConfigProvider theme 的 hashed。让客户端渲染和 extractStyle 获取的 css 都保持一致，就不需要手动 repalce

---

实测 theme.hashed = false， 确实对移除 hashPrefix 有效。 本issue的根源是ant-design-vue@4.x的css是运行时动态生成的，不是预烘焙的，所以px转rem或vw变得很费劲。 最终还是得参考官方文档 https://next.antdv.com/docs/vue/ssr-extract-ssr-cn 进行预烘焙

[nanvon]

@wxlzmt 应该是设置 hashed 为 false 才会移除 hashPrefix 吧，请问大佬是这样吗？

但是我这边移除了之后，打开 modal，按钮的样式还是会由 rem 变成 px，目前还在找解决方案中，如果你能提供更多信息，那就非常感谢。

[wxlzmt]

@wxlzmt 应该是设置 hashed 为 false 才会移除 hashPrefix 吧，请问大佬是这样吗？

但是我这边移除了之后，打开 modal，按钮的样式还是会由 rem 变成 px，目前还在找解决方案中，如果你能提供更多信息，那就非常感谢。

是我写错了， 确实是 theme.hashed = false 可以移除hashPrefix ，（已修改） 。

但是这玩意儿和 modal 关系不大。

最主要的原因还是：

1. modal直接挂载到了body上。
2. css的优先级。
3. 以及ant-design-vue@4.x 的 css in js 模式产生的css你禁不掉。

还好 :where 优先级低， 你自己预烘焙，然后覆盖样式吧。

并非是 按钮的样式还是会由 rem 变成 px ，而是你要么转rem漏了， 要么被自动生成的样式覆盖了。