[vitejs/vite]Vite CSS 插入顺序问题

我刚看了下代码, 这应该不是 vite 的问题, 在 naive-ui 中作者用了css-render 这个库去挂载一些样式, 传了 head:true 这个参数

  // naive-ui
  style.mount({
    id: clsPrefix === undefined ? mountId : clsPrefix + mountId,
    head: true,
    props: {
      bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
    },
    ssr: ssrAdapter
  })
  globalStyle.mount({
    id: 'naive-ui/global',
    head: true,
    ssr: ssrAdapter
  })

在css-render 库中, 传了这个参数会执行以下代码

  // css-render
  if (head) {
    document.head.insertBefore(target, document.head.querySelector('style, link'))
  } else {
    document.head.appendChild(target)
  }

导致 naive-ui 的样式会插在 head 中的任何 style/link 标签之前

@toSayNothing 感谢，讲解得十分透彻，谢谢你的解答。

https://www.naiveui.com/zh-CN/os-theme/docs/style-position

最新的版本可以通过 <meta name="naive-ui-style" /> 控制样式插入的位置，你可以试一下 @qinfensky，如果还是有问题可以继续反馈。

naive-ui最新的版本可以通过 控制样式插入的位置，我使用后，vite 依然会把项目中其他样式插入到head 的最后

复现 https://stackblitz.com/edit/vitejs-vite-jqervm?file=package.json&terminal=dev

@07akioni @qinfensky 那就简单了呀, 不用在 index.html 中写这个 meta 标签, 在 import 完要排在 naive-ui 前的样式后, 手动挂载这个 meta 标签让后面 naive-ui 执行的时候识别就行了.?

import { createApp } from 'vue';
import App from './App.vue';
import './style.scss';
// import 完要在naive-ui前的样式后, 手动挂个meta标签, 
document.head.insertAdjacentHTML('beforeend', '<meta name="naive-ui-style" />');

createApp(App).mount('#app');

https://stackblitz.com/edit/vitejs-vite-ftgdi7?file=src%2Fmain.js&terminal=dev @Niputi maybe one more day ??

@toSayNothing 经我测试是无效的，我在 main.ts 的第一行执行 // import 完要在naive-ui前的样式后, 手动挂个meta标签, document.head.insertAdjacentHTML('beforeend', '<meta name="naive-ui-style" />'); 结果样式还是没正常显示，请问你测试了是正常的吗？

@qinfensky 你看我前面发的 stackblitz , 都是正常的 这是naive-ui 2.23.2 版本的feat, 你是不是没有更新到最新版; 我看你一开始发的那个预览链接里面用的还是2.23.1的版本

@toSayNothing 缓存了，确实是疏忽了，没问题了，谢谢

@qinfensky 好的, 另外可以close掉这个issue哈