如何在Nuxt 3 + Vite中实现组件渲染时懒加载SCSS？

针对你遇到的Vite不支持组件内动态import样式的问题，这里有几个可行的实现方式：

方案1：动态创建link标签加载编译后的样式文件 #

Vite会把SCSS编译成单独的CSS文件（配置正确的前提下），你可以通过import.meta.glob预获取资源路径，然后在组件挂载时动态创建link标签加载：

<script setup>
import { onMounted, onUnmounted } from 'vue'

onMounted(async () => {
  // 用glob匹配目标SCSS文件，Vite会处理为编译后的CSS资源URL
  const styleModules = import.meta.glob('@/assets/css/Footer/async.scss', { as: 'url', eager: true })
  const styleUrl = styleModules['@/assets/css/Footer/async.scss']

  // 创建link标签并插入到head中
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = styleUrl
  document.head.appendChild(link)

  // 组件卸载时移除样式，避免内存泄漏
  onUnmounted(() => {
    document.head.removeChild(link)
  })
})
</script>

注：{ as: 'url', eager: true }配置会让Vite直接返回编译后的CSS文件URL，而非模块对象。

方案2：将组件与样式打包为异步组件 #

把需要懒加载样式的组件做成异步组件，Nuxt会自动将组件的样式拆分到单独的chunk中，只有当组件被渲染时才会加载对应的样式：

<!-- 父组件中引入异步组件 -->
<script setup>
const AsyncFooter = defineAsyncComponent(() => import('./components/Footer.vue'))
</script>

<template>
  <AsyncFooter v-if="showFooter" />
</template>

然后在Footer.vue中正常引入样式：

<style scoped>
@import '@/assets/css/Footer/async.scss';
</style>

这种方式最贴合Nuxt生态，Vite会自动处理资源拆分，无需手动操作DOM。

方案3：使用Nuxt的useHead动态添加样式 #

利用Nuxt3内置的useHeadAPI，在组件挂载时动态注入样式资源：

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useHead } from '#app'

let styleInstance = null

onMounted(() => {
  // 动态添加样式到head
  styleInstance = useHead({
    style: [
      {
        src: '@/assets/css/Footer/async.scss',
        rel: 'stylesheet'
      }
    ]
  })
})

onUnmounted(() => {
  // 卸载时清理样式
  styleInstance?.dispose()
})
</script>

这个方案借助Nuxt的head管理机制，无需手动操作DOM，能保证样式的正确注入与清理。

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