naive-ui nuxt3 样式闪烁问题

官网文档-没有更新： github.com/07akioni/na…

方法-1.生成独立css文件引入：

//plugins/naive-ui.js

import { setup } from '@css-render/vue3-ssr'
import { defineNuxtPlugin } from '#app'
import fs from 'fs';

export default defineNuxtPlugin({
  name: 'naive-ui',
  enforce: 'pre',
  setup(nuxtApp) {
    if (process.server) {
      const { collect } = setup(nuxtApp.vueApp)
      nuxtApp.ssrContext?.head.hooks.hook('tags:resolve', (ctx) => {
        const styles = collect();
        const regex = /<style[^>]*>([\s\S]*?)<\/style>/g;
        let matches;
        const extractedStyles = [];
        while ((matches = regex.exec(styles)) !== null) {
          extractedStyles.push(matches[1].trim());
        }
        const concatenatedStyles = extractedStyles.join('\n');
        fs.writeFile('assets/css/naive.css', concatenatedStyles, (err) => {
          if (err) {
            console.error('Error writing CSS file:', err);
          }
        });
      })
    }
  }
})

//nuxt.config.ts

export default defineNuxtConfig({

  css: [
    '~/assets/css/naive.css',
  ],

})

方法-2.插入style:

export default defineNuxtPlugin({
  name: 'naive-ui',
  enforce: 'pre',
  setup(nuxtApp) {
    if (process.server) {
      const { collect } = setup(nuxtApp.vueApp)
      nuxtApp.ssrContext?.head.hooks.hook('tags:resolve', (ctx) => {
        //  insert Style after meta
        const lastMetaIndex = ctx.tags.map(x => x.tag).lastIndexOf('meta')
        const styleTags = collect().split('</style>').filter(Boolean).map(x => {
          const id = x.match(/cssr-id="(.+?)"/)?.[1]
          const style = (x.match(/>(.*)/s)?.[1] || '').trim()
          return {
            tag: 'style',
            props: {'cssr-id': id},
            innerHTML: style
          }
        })
        ctx.tags.splice(lastMetaIndex+1, 0, ...styleTags)
      })
    }
  }
})