如何配置Vite开发服务器调整CSS标签注入顺序？

方法一：使用Vite内置配置调整注入位置 #

Vite提供了css.injectPosition配置项，可直接控制开发模式下CSS标签的注入位置。将其设置为head-prepend，就能让Vite生成的CSS标签插入到<head>最开头，这样你已有的supplier.css会排在后面，自然拥有更高优先级。

在vite.config.js中添加如下配置：

export default {
  css: {
    injectPosition: 'head-prepend'
  }
}

该配置仅在开发模式生效，打包构建后不会影响原有样式的合并逻辑，完全匹配你的需求。

方法二：自定义注入位置（适配更灵活的场景） #

如果需要将Vite的CSS标签插入到某个特定元素前后（比如supplier.css标签的前面），可以通过Vite的插件钩子transformIndexHtml手动控制注入逻辑：

export default {
  plugins: [
    {
      name: 'custom-css-inject',
      transformIndexHtml(html) {
        // 匹配你的supplier.css链接标签
        const targetLink = '<link rel="stylesheet" href="/static/supplier.css">'
        // 将Vite的CSS注入占位符插入到目标标签之前
        return html.replace(targetLink, `<!--vite-plugin-css-inject-->${targetLink}`)
      }
    }
  ]
}

Vite在处理HTML时会自动识别<!--vite-plugin-css-inject-->占位符，并将生成的CSS标签插入到该位置。

补充说明 #

• css.injectPosition支持的可选值包括：head（默认）、head-prepend、body、body-prepend，适用于Vite 2.7及以上版本。
• 不推荐通过!important强制提升样式优先级，调整注入位置是更规范的解决方案。

内容的提问来源于stack exchange，提问作者munHunger