Vue3中如何动态导入SCSS？Vue2可通过require实现该功能

Vue3完全可以实现类似Vue2中require('*.scss')的动态导入效果，只是推荐使用ES标准的动态import()语法（更符合现代前端模块规范），具体分两种场景实现：

1. 脚本中根据条件动态加载SCSS #

在组件的<script setup>或选项式API中，通过import()结合条件判断实现运行时动态导入：

<script setup>
import { ref, watch } from 'vue'
const activeTheme = ref('light')

// 监听主题变化，动态加载对应SCSS
watch(activeTheme, async (newTheme) => {
  await import(`./styles/themes/${newTheme}.scss`)
})
</script>

如果你的Vue3项目仍使用Webpack构建，也可以继续沿用require语法，但不推荐（ES模块是未来趋势）：

if (activeTheme.value === 'dark') {
  require('./styles/themes/dark.scss')
}

2. 样式中结合预处理器实现动态导入 #

如果需要在<style>标签中基于组件状态动态引入SCSS片段，可以结合SCSS的条件语法+Vue的样式绑定：

<style lang="scss" scoped>
// 预编译时根据变量导入（需配合构建工具传递环境变量）
@if $theme == 'dark' {
  @import './styles/themes/dark.scss';
} @else {
  @import './styles/themes/light.scss';
}

// 或结合Vue的v-bind实现运行时样式切换（更灵活）
:root {
  --primary-color: v-bind('themeColor');
}
</style>

注意：预编译时的条件导入是构建阶段确定的，运行时动态切换仍需配合脚本中的import()实现。

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