如何在 nuxt3 中为每个布局导入不同的样式表

Question

Nuxt3 已经出来了，文档中有些东西不是很清楚，而且由于框架太新，资源有限。

我知道如何通过

nuxt.config.js

文件全局导入 CSS，但我想按布局导入 CSS。

我在

layouts

文件夹中有一个

default.vue

布局，其中包含以下代码。这是行不通的。有什么方法可以实现这一点，以便如果用户使用布局

default.vue

登陆页面，只会使用特定的样式表？另外，有没有办法在useHead里面根据路由使用if语句？

现在看起来，CSS 需要导入到页面而不是布局中，但是能够将 CSS 导入到布局中会很方便，因为它是页面的包装器。

<script setup>
useHead({
  link: [
    {
      rel: 'stylesheet',
      href: '@/assets/main.css'
    }
  ]
})
</script>


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