基于路由切换Sass主题遇阻：动态导入方案失效求助

有5个结构完全一致的页面，每个页面对应一套独立主题，主题文件仅包含调色板、背景图相关的Sass变量。需要实现不同路由页面匹配对应主题，尝试在路由监听器中动态导入主题文件但未生效。

现有代码片段：

• App根组件：

<template>
   <div class="main"></div>
</template>

• main.scss：

.main {
    background-color: $themeColor;
}

• 主题文件1（theme1.scss）：

$themeColor: black

• 主题文件2（theme2.scss）：

$themeColor: white

Sass是预编译型CSS预处理语言，所有变量在项目构建编译阶段就会被替换为具体值，运行时动态导入Sass文件无法修改已编译完成的CSS样式，所以直接动态导入主题变量文件不会生效。

方案一：CSS变量+类名切换（推荐，适合全局动态切换） #

1. 改造主题文件 #

将Sass变量改为定义CSS变量的主题类：
theme-black.scss：

:root.theme-black {
  --theme-color: black;
  // 其他主题变量（如背景图、文字色等）都按此格式定义
}

theme-white.scss：

:root.theme-white {
  --theme-color: white;
}

2. 修改全局样式文件 #

将main.scss中的Sass变量替换为CSS变量：

.main {
  background-color: var(--theme-color);
}

3. 在根组件监听路由切换主题类 #

通过路由路径映射对应的主题类，给根元素动态绑定类名：

<template>
  <div :class="currentTheme" class="main"></div>
</template>

<script>
export default {
  data() {
    return {
      currentTheme: ''
    }
  },
  watch: {
    $route(to) {
      // 路由与主题的映射表，根据实际路由路径调整
      const routeThemeMap = {
        '/route1': 'theme-black',
        '/route2': 'theme-white',
        // 补充其他3个路由对应的主题类
      }
      this.currentTheme = routeThemeMap[to.path] || ''
    }
  },
  mounted() {
    // 页面初始化时设置对应主题
    const routeThemeMap = {
      '/route1': 'theme-black',
      '/route2': 'theme-white',
    }
    this.currentTheme = routeThemeMap[this.$route.path] || ''
  }
}
</script>

<style lang="scss">
// 全局导入所有主题文件
@import './theme/theme-black.scss';
@import './theme/theme-white.scss';
// 导入剩余3个主题文件
</style>

方案二：页面级单独引入主题（适合页面完全独立的场景） #

如果每个路由对应独立的页面组件，可在组件的样式中单独引入对应主题文件：

• 路由1对应的Page1.vue：

<template>
  <div class="main"></div>
</template>

<style lang="scss">
// 先引入对应主题变量，再引入全局样式
@import './theme/theme1.scss';
@import './main.scss';
</style>

• 路由2对应的Page2.vue：

<template>
  <div class="main"></div>
</template>

<style lang="scss">
@import './theme/theme2.scss';
@import './main.scss';
</style>

这种方式下，每个页面在编译时会使用对应主题变量生成独立的CSS，切换路由时自然加载对应主题样式。

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