Nuxt 3如何调整head中CSS/Style标签的加载顺序？

核心思路 #

通过关闭框架的自动样式注入，手动控制CSS文件的加载顺序，确保自定义CSS排在框架CSS之后，从而获得更高优先级。

针对Element Plus的配置 #

在nuxt.config.ts中调整配置，关闭自动导入样式，手动指定加载顺序：

export default defineNuxtConfig({
  modules: ['@element-plus/nuxt'],
  // 关闭Element Plus自动注入样式
  elementPlus: {
    importStyle: false
  },
  // 手动按顺序导入CSS：先框架样式，再自定义样式
  css: [
    'element-plus/dist/index.css',
    '@/assets/main.scss'
  ]
})

针对Vuetify的配置 #

同样关闭自动样式注入，手动控制顺序：

export default defineNuxtConfig({
  modules: ['@nuxtjs/vuetify'],
  // 关闭Vuetify自动注入样式
  vuetify: {
    styles: false
  },
  css: [
    'vuetify/styles',
    '@/assets/main.scss'
  ]
})

备选方案：通过useHead动态加载自定义CSS #

如果不想关闭框架自动注入，可以在app.vue或根布局中使用Nuxt的useHead API，将自定义CSS标签插入到<head>末尾：

<script setup>
useHead({
  style: [
    {
      src: '@/assets/main.scss',
      rel: 'stylesheet',
      type: 'text/scss'
    }
  ]
})
</script>

注：该方法需确保Nuxt已配置SCSS预处理器（提前执行npm install sass -D安装依赖）。

注意事项 #

1. 若使用SCSS/SASS预处理器，必须先安装对应依赖，否则无法编译自定义样式文件。
2. 若采用组件按需导入模式，框架可能仍会自动注入单个组件的样式，此时手动导入框架全局样式的方式依然能保证自定义样式的优先级。

内容的提问来源于stack exchange，提问作者Son Tr.