Comments (31)
Another issue, is it expected? https://stackblitz.com/edit/github-52q5xr-lvxhhn?file=scripts%2FantToken.json,pages%2Fabout.vue
Tags like
h1
behave differently between client only and SSR. You can see it in the about page.
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.
from ant-design-vue-nuxt.
Another issue, is it expected? https://stackblitz.com/edit/github-52q5xr-lvxhhn?file=scripts%2FantToken.json,pages%2Fabout.vue
Tags likeh1
behave differently between client only and SSR. You can see it in the about page.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 get-container
prop. So all good :D
from ant-design-vue-nuxt.
demo → nuxt-antd-css-demo,处理支持 nuxt 日常的 ssr 也支持 nuxt generate。
核心代码在于 → nuxt-antd-css-demo/modules/antd.ts#L11
from ant-design-vue-nuxt.
我刚发现不只是这个组件的问题,在nuxts3环境里,使用的组件刷新时都会丢失样式,然后刷新完成之后样式又回复正常了
from ant-design-vue-nuxt.
nuxt generate后样式还是会丢失
from ant-design-vue-nuxt.
Also i also get a flickery page when refreshing anyway in plain SSR, the fix with the extracted styles doesn't change that. stackblitz.com/edit/github-52q5xr-wk4qod?file=scripts%2FantToken.json,scripts%2FgenAntdStyle.ts
Unfortunately, there are still problems with the dark mode. You can wait for antd to fix it, and we will follow up.
from ant-design-vue-nuxt.
hello各位,根据antd 文档我找到了一种方式处理刷新样式丢失的问题,解决的方式是利用nuxt钩子来创建antd的css文件,请参考以下代码,顺便问下作者@aibayanyu20,在ant-design-vue/nuxt module中可以为我们生成这个样式吗?
import { extractStyle } from 'ant-design-vue/lib/_util/static-style-extract';
import path from 'path';
import fs from 'fs';
function genAntdCss(filePath: string) {
const directoryPath = path.dirname(filePath);
if (!fs.existsSync(directoryPath)) {
fs.mkdirSync(directoryPath, { recursive: true });
}
const css = extractStyle();
fs.writeFileSync(filePath, css);
}
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
app: {
head: {
link: [
{
rel: 'stylesheet',
href: 'css/antd.css', // 这里和下面public后的路径相同
},
],
},
},
modules: [
'@ant-design-vue/nuxt',
],
css: ['ant-design-vue/dist/reset.css'],
hooks: {
'build:before': () => {
genAntdCss(path.join(__dirname, 'public', 'css', 'antd.css'));
},
},
});
from ant-design-vue-nuxt.
@Tinkle 这是一个在运行时的解决方案,但是并不能解决在开发时的问题,所以目前不会集成到module中,按需加载可能是一个比较不错的解决方案,但是目前我们还没确实实现方式,如果你有更好的按需的解决方案,可以在这里分享一下
from ant-design-vue-nuxt.
我的项目是有这个配置项的在package.json中添加"type":"module"
我直接克隆你的示例项目到本地运行发现是正常的,太奇怪了,我不确定是什么原因,很奇怪
那你可以尝试将es改成lib
from ant-design-vue-nuxt.
例子:https://github.com/antdv-pro/antdv-nuxt-starter
from ant-design-vue-nuxt.
你好,我也遇到了这个问题,请问你有找到解决方案吗
from ant-design-vue-nuxt.
https://stackblitz.com/edit/github-52q5xr-ve5njf?file=README.md 看下这个demo,里面有生成静态样式的方案
from ant-design-vue-nuxt.
cssinjs的导致的问题,在nuxt环境中正常导出一份静态css的样式给到组件去消费就好了,参考 https://antdv.com/docs/vue/ssr-extract-ssr
from ant-design-vue-nuxt.
import { extractStyle } from 'ant-design-vue/lib/_util/static-style-extract';
import fs from 'fs';
// extractStyle
containers all the antd component
// excludes popup like component which is no need in ssr: Modal, message, notification, etc.
const css = extractStyle();
fs.writeFile(...);
我看到了官网的那个解决方案,但是我不知道那个示例的代码应该写在哪,抱歉我对前端不是很熟练
from ant-design-vue-nuxt.
我已经在回复中提供的nuxt-starter中已经有了一demo,参考自行改造: https://github.com/antdv-community/antdv-nuxt-starter
from ant-design-vue-nuxt.
那个demo我下载下来跑通了,不是很理解背后的原理,这种使用方式对复杂页面的性能会有影响吗
from ant-design-vue-nuxt.
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.
https://stackblitz.com/edit/github-52q5xr-1vokvb?file=app.vue,nuxt.config.ts
Also i also get a flickery page when refreshing anyway in plain SSR, the fix with the extracted styles doesn't change that.
https://stackblitz.com/edit/github-52q5xr-wk4qod?file=scripts%2FantToken.json,scripts%2FgenAntdStyle.ts
from ant-design-vue-nuxt.
我这已经可以了,特地来道谢,另外 每次启动起来都会有这样一个报错
ERROR [GET] "https://fonts.googleapis.com/css2?family=DM+Sans&family=DM+Serif+Display&family=DM+Mono&display=swap": fetch failed
请问这个是在哪里使用,可以关闭或者替换吗
from ant-design-vue-nuxt.
回来关注下,nuxt generate 打包后 样式丢失的问题有修复了么,或者有没什么方法处理 @aibayanyu20 大佬
from ant-design-vue-nuxt.
回来关注下,nuxt generate 打包后 样式丢失的问题有修复了么,或者有没什么方法处理 @aibayanyu20 大佬
生成的时候也要生成静态样式
from ant-design-vue-nuxt.
我这已经可以了,特地来道谢,另外 每次启动起来都会有这样一个报错 ERROR [GET] "fonts.googleapis.com/css2?family=DM+Sans&family=DM+Serif+Display&family=DM+Mono&display=swap": fetch failed 请问这个是在哪里使用,可以关闭或者替换吗
这个不清楚什么导致的,或许跟你引用了一些其他的库导致的问题,而不一定是antdv-nuxt的问题
from ant-design-vue-nuxt.
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 !
from ant-design-vue-nuxt.
Also i also get a flickery page when refreshing anyway in plain SSR, the fix with the extracted styles doesn't change that. stackblitz.com/edit/github-52q5xr-wk4qod?file=scripts%2FantToken.json,scripts%2FgenAntdStyle.ts
Unfortunately, there are still problems with the dark mode. You can wait for antd to fix it, and we will follow up.
@aibayanyu20 do you know if the ant team is aware of this or would an issue in some of their repositories be helpful ?
from ant-design-vue-nuxt.
Another issue, is it expected?
https://stackblitz.com/edit/github-52q5xr-lvxhhn?file=scripts%2FantToken.json,pages%2Fabout.vue
Tags like h1
behave differently between client only and SSR. You can see it in the about page.
from ant-design-vue-nuxt.
您好,我复刻了你的示例在我的项目中,但是执行生成静态样式的脚本会报错,我不知道怎么解决:
from ant-design-vue-nuxt.
您好,我复刻了你的示例在我的项目中,但是执行生成静态样式的脚本会报错,我不知道怎么解决:
在package.json中添加"type":"module"
from ant-design-vue-nuxt.
在package.json中添加"type":"module"
我的项目是有这个配置项的
我直接克隆你的示例项目到本地运行发现是正常的,太奇怪了,我不确定是什么原因,很奇怪
from ant-design-vue-nuxt.
那你可以尝试将es改成lib
非常感谢,解决了!
from ant-design-vue-nuxt.
ConfigProvider动态配置了theme,导致在生产环境中,cssinjs会重新执行,使得组件使用的:where 选择器的has值与使用extractStyle导出的静态样式文件内:where 选择器的has值不同。等于extractStyle导出的静态样式文件是无效的了,这有什么好的解决方案吗?
from ant-design-vue-nuxt.
a-layout组件在使用时一如既往的闪烁
from ant-design-vue-nuxt.
update 1.4.1
from ant-design-vue-nuxt.
Related Issues (20)
- Typescript error for extractStyle HOT 1
- extractStyle开启后页面卡死 HOT 4
- extractStyle开启后 icon-font 组件图标显示不了 HOT 2
- Pre-transform error: Failed to resolve import "ant-design-vue/es" from "virtual:nuxt:D:\project\git\\.nuxt\imports.mjs". Does the file e xist? HOT 5
- 多选Select组件选择多项时报错 HOT 10
- 使用message的hooks调用,页面直接白屏了 HOT 1
- 切换tab后,empty显示不出来 HOT 1
- dayjs error not provide an export named 'default' HOT 1
- Hover submenu in menu not working HOT 1
- antd所有样式不生效 HOT 1
- Failed to resolve component: a-extract-style
- Ant Design doesn't work with Nuxt Layers HOT 5
- 页面刷新后超长省略失效
- a-cascader 点击报错
- extractStyle设置为true后,样式加在了style标签里面,如何让他独立成
- The requested module '/_nuxt/node_modules/.pnpm/[email protected]/node_modules/dayjs/plugin/advancedFormat.js?v=3a277238' does not provide an export named 'default' (at dayjs.js?v=3a277238:7:8) HOT 7
- a-empty组件切换语言后图片消失,首次加载是正确的
- 使用menu组件时设置mode="vertical"的方式,结果子菜单弹窗没有显示出来,大佬们帮忙看下 HOT 3
- extractStyle开启后有办法不让css直接显示在源码中,而是分隔成css文件吗
- Nuxt with AntDV Throws Error: yarn and pnpm HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ant-design-vue-nuxt.