如何在 nuxt3 中根据布局导入不同的样式表

问题描述 投票：0回答：1

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

我知道如何通过 

nuxt.config.js
文件全局导入 css，但我想按布局导入 css。

如果我有一个博客，我希望切换暗按钮可见，我希望 css 包含暗模式和亮模式的样式，但在主页上它应该只是暗的，不应该有亮模式。

我在 

layouts
文件夹中有一个 
default.vue
布局，其中包含以下代码。这是行不通的。有什么方法可以实现这一点，以便如果用户使用布局 
default.vue
登陆页面，只会使用特定的样式表？另外，有没有办法在useHead里面根据路由使用if语句？

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


<template>
  <AppHeader />
  <slot />
  <AppFooter />
</template>
javascript nuxt.js nuxt3
1个回答
0
投票

在Nuxt3中，您可以使用

useHead
功能修改页面的
<head>
标签，包括添加样式表。要仅向特定布局添加样式表，您可以在 
useHead
函数中检查布局名称，并根据该名称有条件地添加样式表。

这是一个示例，说明如何修改 

default.vue
布局中的代码以有条件地添加样式表：

<script setup>
import { useHead } from 'nuxt3'

// get the current layout name
const layoutName = $nuxt.context.layoutName

// conditionally add stylesheet based on layout name
if (layoutName === 'default') {
  useHead({
    link: [
      {
        rel: 'stylesheet',
        href: '@/assets/dark.css'
      }
    ]
  })
} else if (layoutName === 'blog') {
  useHead({
    link: [
      {
        rel: 'stylesheet',
        href: '@/assets/dark.css'
      },
      {
        rel: 'stylesheet',
        href: '@/assets/light.css'
      }
    ]
  })
}
</script>

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

在此示例中，我们使用 

$nuxt.context.layoutName
获取当前布局名称。然后我们根据布局名称有条件地添加适当的样式表。

请注意，您可以通过将对象数组传递给

link
中的
useHead
键来添加多个样式表。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.