-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在nuxt3中使用ant design vue4,我使用任何组件的时候都是,在刷新页面的时候,样式会丢失,刷新完成之后就变正常了,这是怎么回事呢,我使用ant-design-vue- nuxt同样的效果 #18
Comments
你好,我也遇到了这个问题,请问你有找到解决方案吗 |
https://stackblitz.com/edit/github-52q5xr-ve5njf?file=README.md 看下这个demo,里面有生成静态样式的方案 |
我刚发现不只是这个组件的问题,在nuxts3环境里,使用的组件刷新时都会丢失样式,然后刷新完成之后样式又回复正常了 |
cssinjs的导致的问题,在nuxt环境中正常导出一份静态css的样式给到组件去消费就好了,参考 https://antdv.com/docs/vue/ssr-extract-ssr |
import { extractStyle } from 'ant-design-vue/lib/_util/static-style-extract'; // fs.writeFile(...); 我看到了官网的那个解决方案,但是我不知道那个示例的代码应该写在哪,抱歉我对前端不是很熟练 |
我已经在回复中提供的nuxt-starter中已经有了一demo,参考自行改造: https://github.com/antdv-community/antdv-nuxt-starter |
那个demo我下载下来跑通了,不是很理解背后的原理,这种使用方式对复杂页面的性能会有影响吗 |
Not directly related with the current issue but i noticed that when setting the prerendering option in the nuxt routeRules the style are not applied to those views after a build, you can reproduce here. Also i also get a flickery page when refreshing anyway in plain SSR, the fix with the extracted styles doesn't change that. |
nuxt generate后样式还是会丢失 |
我这已经可以了,特地来道谢,另外 每次启动起来都会有这样一个报错 |
回来关注下,nuxt generate 打包后 样式丢失的问题有修复了么,或者有没什么方法处理 @aibayanyu20 大佬 |
生成的时候也要生成静态样式 |
这个不清楚什么导致的,或许跟你引用了一些其他的库导致的问题,而不一定是antdv-nuxt的问题 |
Unfortunately, there are still problems with the dark mode. You can wait for antd to fix it, and we will follow up. |
ok thanks a lot @aibayanyu20 , i will deploy to production in January , so there is still time, crossing my fingers :D and thanks for the module ! |
This comment was marked as outdated.
This comment was marked as outdated.
@Tinkle 这是一个在运行时的解决方案,但是并不能解决在开发时的问题,所以目前不会集成到module中,按需加载可能是一个比较不错的解决方案,但是目前我们还没确实实现方式,如果你有更好的按需的解决方案,可以在这里分享一下 |
@aibayanyu20 do you know if the ant team is aware of this or would an issue in some of their repositories be helpful ? |
Another issue, is it expected? Tags like |
非常感谢,解决了! |
My bad, just noticed that i never wrote and h1 element and that the style is the same. I've this issue inside the a-drawer, i guess that one has it's style propagated from somewhere else. |
My bad again, fixed by moving the drawer out of my main container and giving it my main layout id in the |
ConfigProvider动态配置了theme,导致在生产环境中,cssinjs会重新执行,使得组件使用的:where 选择器的has值与使用extractStyle导出的静态样式文件内:where 选择器的has值不同。等于extractStyle导出的静态样式文件是无效的了,这有什么好的解决方案吗? |
a-layout组件在使用时一如既往的闪烁 |
demo → nuxt-antd-css-demo,处理支持 nuxt 日常的 ssr 也支持 nuxt generate。 |
update 1.4.1 |
版本:
nuxt.config.ts文件
我就是配置了这些, 然后使用就是在官网上找的例子: 然后在刷新的时候, 样式丢失, 刷新完成之后就变正常了
The text was updated successfully, but these errors were encountered: