Vue构建时选择常规主题且保留运行时切换无障碍主题方案咨询

以下方案无需修改源文件复制覆盖，可直接在构建阶段指定常规主题，同时完全保留运行时切换无障碍主题的原有逻辑：

方案1：SCSS变量+构建环境变量（推荐） #

• 第一步：拆分主题变量
  将不同场景的常规主题变量独立为单独文件，按统一规则命名，例如：

  • theme-default.scss：默认常规主题变量
  • theme-scene1.scss：场景1常规主题变量
  • theme-scene2.scss：场景2常规主题变量
    所有变量定义（如$font-family-base、$primary-color等）放在对应主题文件中，原app.scss仅保留样式逻辑，所有值使用变量定义。

• 第二步：注入构建时变量
  在Vue构建配置（vue.config.js如果是vue-cli项目，vite.config.js如果是vite项目）中，将环境变量注入到SCSS预处理上下文：

// vue.config.js 示例
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `$current-theme: "${process.env.VUE_APP_THEME || 'default'}";`
      }
    }
  }
}

• 第三步：改造主题导入逻辑
  将原有样式规则修改为条件导入：

#app.default {
  // 按构建传入的主题标识导入对应变量
  @if $current-theme == 'scene1' {
    @import './assets/scss/theme-scene1.scss';
  } @else if $current-theme == 'scene2' {
    @import './assets/scss/theme-scene2.scss';
  } @else {
    @import './assets/scss/theme-default.scss';
  }
  @import './assets/scss/app.scss';
  font-family: $font-family-base;
}

// 无障碍主题逻辑完全不变，运行时切换不受影响
#app.accessibility {
  @import './assets/scss/app-accessibility.scss';
}

• 第四步：Ant脚本适配
  修改Ant构建脚本，支持传入主题参数设置环境变量：

<target name="build">
  <!-- 支持通过 -Dtheme=xxx 传入主题标识，默认用default -->
  <property name="theme" value="default"/>
  <exec executable="npm" failonerror="true">
    <env key="VUE_APP_THEME" value="${theme}"/>
    <arg value="run"/>
    <arg value="build"/>
  </exec>
</target>

构建时直接执行 ant build -Dtheme=scene1 即可生成对应场景的包。

方案2：简化路径导入（无需条件判断） #

如果主题命名规则统一，可以省去SCSS的条件判断，直接注入导入路径：
修改构建配置的additionalData为：

additionalData: `@import './assets/scss/theme-${process.env.VUE_APP_THEME || 'default'}.scss';`

此时app.default块内无需再单独导入变量文件，直接引入app.scss即可，变量会自动从构建指定的主题文件加载。

方案优势 #

相比复制覆盖文件的方案，以上实现：

• 无文件IO操作，不会出现文件覆盖错误、旧文件残留的问题
• 主题与构建逻辑完全解耦，新增主题仅需新增对应theme-xxx.scss文件，无需修改构建脚本的复制逻辑
• 原有运行时切换无障碍主题的逻辑完全不需要改动，兼容性好

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