Nuxt3移动端与桌面端Header组件样式按需加载问题咨询

问题场景 #

在Nuxt3项目中，通过v-if="isMobile"切换异步加载的MobileHeader.vue和Header.vue组件，但两个组件各自引入的SCSS样式会被同时加载，而非仅在组件渲染时加载。已禁用组件自动加载，常规导入组件也无效，需要实现样式随组件按需加载。

布局代码：

<template>
  <MobileHeader v-if="isMobile" />
  <Header v-else />
  <slot />
</template>
<script setup>
const MobileHeader = defineAsyncComponent(() => import('~/components/layout/MobileHeader.vue'));
const Header = defineAsyncComponent(() => import('~/components/layout/Header.vue'));
</script>

组件引入SCSS的方式：

<style lang="scss">
@import "/assets/scss/components/layout/mobile-header";
</style>

解决方案 #

方法1：利用Nuxt自动组件懒加载绑定样式 #

虽然你之前禁用了自动加载，但可以针对性配置，让Nuxt自动处理组件和样式的懒加载绑定：

1. 在nuxt.config.ts中开启组件自动加载，指定目标组件目录：

export default defineNuxtConfig({
  components: {
    dirs: ['~/components/layout']
  }
})

2. 布局文件中直接使用组件，无需手动异步导入，Nuxt会自动将组件和样式打包到对应异步chunk：

<template>
  <MobileHeader v-if="isMobile" />
  <Header v-else />
  <slot />
</template>
<script setup>
const isMobile = ref(false)
// 补充你的设备判断逻辑，比如使用useWindowSize监听窗口尺寸
</script>

方法2：手动将样式导入到组件异步chunk #

如果必须手动异步导入组件，可将样式导入移至组件的setup函数中，确保样式随组件chunk加载：
修改MobileHeader.vue：

<template>
  <!-- 组件内容 -->
</template>
<script setup>
// 动态导入样式，和组件同chunk加载
import '/assets/scss/components/layout/mobile-header.scss'
// 组件业务逻辑
</script>
<!-- 移除原<style>标签 -->

同理修改Header.vue：

<template>
  <!-- 组件内容 -->
</template>
<script setup>
import '/assets/scss/components/layout/header.scss'
// 组件业务逻辑
</script>

方法3：Scoped样式配合异步组件 #

如果样式是组件专属的，使用<style scoped>包裹导入的SCSS，Nuxt会自动将样式与组件绑定，实现按需加载：

<template>
  <div class="mobile-header">...</div>
</template>
<style lang="scss" scoped>
@import "/assets/scss/components/layout/mobile-header";
</style>

注意：此方法适用于组件专属样式，若导入的是全局样式，scoped会添加作用域前缀，需确保样式适配。

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