在nuxt3中使用ant design vue4，我使用任何组件的时候都是，在刷新页面的时候，样式会丢失，刷新完成之后就变正常了，这是怎么回事呢，我使用ant-design-vue- nuxt同样的效果

[wolfDown]

版本:

"devDependencies":` {
    "@ant-design-vue/nuxt": "^1.1.2",
    "@nuxt/devtools": "latest",
    "nuxt": "^3.7.4",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  },

nuxt.config.ts文件

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@ant-design-vue/nuxt"],
});

我就是配置了这些, 然后使用就是在官网上找的例子: 然后在刷新的时候, 样式丢失, 刷新完成之后就变正常了

<template>
  <div>
    <!-- <NuxtWelcome /> -->
    <a-tree
      v-model:expandedKeys="expandedKeys"
      v-model:selectedKeys="selectedKeys"
      v-model:checkedKeys="checkedKeys"
      checkable
      :tree-data="treeData"
    >
      <template #title="{ title, key }">
        <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
        <template v-else>{{ title }}</template>
      </template>
    </a-tree>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import type { TreeProps } from "ant-design-vue";

const treeData: TreeProps["treeData"] = [
  {
    title: "parent 1",
    key: "0-0",
    children: [
      {
        title: "parent 1-0",
        key: "0-0-0",
        disabled: true,
        children: [
          { title: "leaf", key: "0-0-0-0", disableCheckbox: true },
          { title: "leaf", key: "0-0-0-1" },
        ],
      },
      {
        title: "parent 1-1",
        key: "0-0-1",
        children: [{ key: "0-0-1-0", title: "sss" }],
      },
    ],
  },
];

const expandedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
const selectedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
const checkedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
watch(expandedKeys, () => {
  console.log("expandedKeys", expandedKeys);
});
watch(selectedKeys, () => {
  console.log("selectedKeys", selectedKeys);
});
watch(checkedKeys, () => {
  console.log("checkedKeys", checkedKeys);
});
</script>

[aibayanyu20]

例子：https://github.com/antdv-pro/antdv-nuxt-starter

[1than]

你好，我也遇到了这个问题，请问你有找到解决方案吗

[aibayanyu20]

https://stackblitz.com/edit/github-52q5xr-ve5njf?file=README.md 看下这个demo，里面有生成静态样式的方案

[1than]

我刚发现不只是这个组件的问题，在nuxts3环境里，使用的组件刷新时都会丢失样式，然后刷新完成之后样式又回复正常了

[aibayanyu20]

cssinjs的导致的问题，在nuxt环境中正常导出一份静态css的样式给到组件去消费就好了，参考 https://antdv.com/docs/vue/ssr-extract-ssr

[1than]

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(...);

我看到了官网的那个解决方案，但是我不知道那个示例的代码应该写在哪，抱歉我对前端不是很熟练

[aibayanyu20]

我已经在回复中提供的nuxt-starter中已经有了一demo，参考自行改造: https://github.com/antdv-community/antdv-nuxt-starter

[1than]

那个demo我下载下来跑通了，不是很理解背后的原理，这种使用方式对复杂页面的性能会有影响吗

[fskarmeta]

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

[luo772435545]

nuxt generate后样式还是会丢失

[1than]

我这已经可以了，特地来道谢，另外 每次启动起来都会有这样一个报错 ERROR [GET] "https://fonts.googleapis.com/css2?family=DM+Sans&family=DM+Serif+Display&family=DM+Mono&display=swap": fetch failed
请问这个是在哪里使用，可以关闭或者替换吗

[luo772435545]

回来关注下，nuxt generate 打包后 样式丢失的问题有修复了么，或者有没什么方法处理 @aibayanyu20 大佬

[aibayanyu20]

回来关注下，nuxt generate 打包后 样式丢失的问题有修复了么，或者有没什么方法处理 @aibayanyu20 大佬

生成的时候也要生成静态样式

[aibayanyu20]

我这已经可以了，特地来道谢，另外 每次启动起来都会有这样一个报错 ERROR [GET] "fonts.googleapis.com/css2?family=DM+Sans&family=DM+Serif+Display&family=DM+Mono&display=swap": fetch failed 请问这个是在哪里使用，可以关闭或者替换吗

这个不清楚什么导致的，或许跟你引用了一些其他的库导致的问题，而不一定是antdv-nuxt的问题

[aibayanyu20]

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.

[fskarmeta]

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 !

[Tinkle]

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'));
    },
  },
});

[aibayanyu20]

@Tinkle 这是一个在运行时的解决方案，但是并不能解决在开发时的问题，所以目前不会集成到module中，按需加载可能是一个比较不错的解决方案，但是目前我们还没确实实现方式，如果你有更好的按需的解决方案，可以在这里分享一下

[fskarmeta]

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 ?

[fskarmeta]

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.

[lianginx]

您好，我复刻了你的示例在我的项目中，但是执行生成静态样式的脚本会报错，我不知道怎么解决：

[aibayanyu20]

您好，我复刻了你的示例在我的项目中，但是执行生成静态样式的脚本会报错，我不知道怎么解决：

在package.json中添加"type":"module"

[lianginx]

您好，我复刻了你的示例在我的项目中，但是执行生成静态样式的脚本会报错，我不知道怎么解决：

在package.json中添加"type":"module"

我的项目是有这个配置项的

我直接克隆你的示例项目到本地运行发现是正常的，太奇怪了，我不确定是什么原因，很奇怪

[aibayanyu20]

您好，我复刻了你的示例在我的项目中，但是执行生成静态样式的脚本会报错，我不知道怎么解决：

在package.json中添加"type":"module"

我的项目是有这个配置项的

我直接克隆你的示例项目到本地运行发现是正常的，太奇怪了，我不确定是什么原因，很奇怪

那你可以尝试将es改成lib

[lianginx]

那你可以尝试将es改成lib

非常感谢，解决了！

[fskarmeta]

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.

[fskarmeta]

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.

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

[fangshgit]

ConfigProvider动态配置了theme，导致在生产环境中，cssinjs会重新执行，使得组件使用的:where 选择器的has值与使用extractStyle导出的静态样式文件内:where 选择器的has值不同。等于extractStyle导出的静态样式文件是无效的了，这有什么好的解决方案吗？

[nigiwen]

a-layout组件在使用时一如既往的闪烁

[markthree]

demo → nuxt-antd-css-demo，处理支持 nuxt 日常的 ssr 也支持 nuxt generate。

核心代码在于 → nuxt-antd-css-demo/modules/antd.ts#L11

@luo772435545

[aibayanyu20]

update 1.4.1

[migozzzz]

demo → nuxt-antd-css-demo，处理支持 nuxt 日常的 ssr 也支持 nuxt generate。

核心代码在于 → nuxt-antd-css-demo/modules/antd.ts#L11

@luo772435545

如果使用a-config-provider配置主题，又无效了