Nuxt3中如何为每个布局导入不同样式表？

一、布局中单独加载特定CSS的正确方式 #

你当前代码不生效的核心原因是@别名在useHead的href属性中无法被Nuxt自动解析，同时需要确保路径配置符合Nuxt的资源处理规则，以下是两种可靠实现方式：

方式1：修正useHead路径并确保资源可访问 #

将@/assets/main.css改为~/assets/main.css，Nuxt会正确解析该路径并生成对应的资源URL：

<script setup>
useHead({
  link: [
    {
      rel: 'stylesheet',
      href: '~/assets/main.css',
      media: 'all' // 可选，确保样式表默认加载
    }
  ]
})
</script>

<template>
  <AppHeader />
  <slot />
  <AppFooter />
</template>

如果希望样式表作为独立外链加载而非打包进页面，可将CSS文件移至public目录，直接使用根路径引用：

useHead({
  link: [
    {
      rel: 'stylesheet',
      href: '/main.css' // public目录下的main.css
    }
  ]
})

方式2：通过style标签导入（打包进页面样式） #

若不需要独立外链样式表，可直接在布局的style标签中导入CSS，这样只会在使用该布局的页面加载对应样式：

<style>
@import '~/assets/main.css';
</style>

<script setup>
// 其他布局逻辑
</script>

<template>
  <AppHeader />
  <slot />
  <AppFooter />
</template>

二、在useHead中基于路由使用条件逻辑 #

完全可以实现，利用useRoute获取当前路由信息，结合useHead的回调特性即可动态配置：

方式1：直接在useHead回调中写条件 #

<script setup>
const route = useRoute()

// useHead接受回调函数时，会随路由变化自动重新执行
useHead(() => ({
  link: [
    // 仅当路由匹配/about路径时加载该样式表
    ...(route.path === '/about' ? [{ rel: 'stylesheet', href: '~/assets/about.css' }] : []),
    // 始终加载的布局基础样式
    { rel: 'stylesheet', href: '~/assets/main.css' }
  ]
}))
</script>

方式2：监听路由变化动态更新 #

如果需要更复杂的路由判断逻辑，可通过watch监听路由变化：

<script setup>
const route = useRoute()
const dynamicLinks = ref([])

// 初始加载及路由变化时更新配置
watch(route, (newRoute) => {
  dynamicLinks.value = []
  if (newRoute.path.startsWith('/admin')) {
    dynamicLinks.value.push({ rel: 'stylesheet', href: '~/assets/admin.css' })
  }
}, { immediate: true })

useHead({
  link: dynamicLinks
})
</script>

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