Angular 12 + Bootstrap 5 多SCSS主题文件如何仅加载选中的单个主题

你当前的写法会导致三个主题的SCSS变量按导入顺序覆盖，只有最后一个主题的变量会生效，且所有样式都会被打包到全局文件里，无法实现动态切换。按以下步骤调整即可实现仅加载选中主题+对应Bootstrap样式的需求：

步骤1：调整编译配置，单独打包主题文件 #

首先修改angular.json配置，将每个主题单独作为编译入口，打包成独立的CSS文件，且禁止默认注入到index.html：

// 找到 projects > 你的项目名 > architect > build > options > styles 节点
"styles": [
  "src/styles.scss", // 全局非主题相关的公共样式保留在这里
  {
    "input": "src/assets/styles/theme1.scss",
    "bundleName": "themes/theme1",
    "inject": false
  },
  {
    "input": "src/assets/styles/theme2.scss",
    "bundleName": "themes/theme2",
    "inject": false
  },
  {
    "input": "src/assets/styles/theme3.scss",
    "bundleName": "themes/theme3",
    "inject": false
  }
]

然后调整每个主题SCSS文件的内容，把Bootstrap的导入移到每个主题变量定义的最后，确保变量覆盖生效：

// theme1.scss 示例，其余主题同理
$theme: "darktheme" !default;

$white:    #fff !default;
$gray-100: #f8f9fa !default;
// 其余自定义变量省略

// 最后导入Bootstrap，才能读取上面的自定义变量
@import '~node_modules/bootstrap/scss/bootstrap.scss';

删除原style.scss里的主题、Bootstrap导入语句，只保留全局公共样式。

步骤2：实现主题动态加载逻辑 #

创建全局主题服务，处理主题的加载、切换、本地存储逻辑：

// src/app/services/theme.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ThemeService {
  // 记录已加载的主题link标签，切换时移除
  private currentThemeEl: HTMLLinkElement | null = null;
  private readonly themePathPrefix = 'themes/';

  loadTheme(themeName: 'theme1' | 'theme2' | 'theme3'): void {
    // 移除旧主题样式
    if (this.currentThemeEl) {
      document.head.removeChild(this.currentThemeEl);
    }

    // 创建新样式标签
    const linkEl = document.createElement('link');
    linkEl.rel = 'stylesheet';
    linkEl.href = `${this.themePathPrefix}${themeName}.css`;
    linkEl.onload = () => {
      this.currentThemeEl = linkEl;
      // 保存选中主题到本地存储，下次启动自动加载
      localStorage.setItem('user-selected-theme', themeName);
    };

    document.head.appendChild(linkEl);
  }

  // 应用初始化时调用，加载上次用户选中的主题
  initTheme(): void {
    const savedTheme = localStorage.getItem('user-selected-theme') as 'theme1' | 'theme2' | 'theme3' || 'theme1';
    this.loadTheme(savedTheme);
  }
}

步骤3：初始化主题与切换调用 #

在根组件初始化时调用主题初始化方法，同时可以给切换按钮绑定切换方法：

// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { ThemeService } from './services/theme.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private themeService: ThemeService) {}

  ngOnInit(): void {
    // 启动时加载保存的主题
    this.themeService.initTheme();
  }

  // 给页面主题切换按钮绑定的方法
  switchTheme(themeName: 'theme1' | 'theme2' | 'theme3'): void {
    this.themeService.loadTheme(themeName);
  }
}

注意事项 #

• SCSS变量是预编译时生效的，所以必须每个主题单独打包才能正确应用各自的变量覆盖Bootstrap默认值
• inject: false配置非常重要，否则Angular会自动把所有主题CSS都注入到index.html，导致样式冲突
• 生产打包时所有主题CSS会自动输出到dist/你的项目名/themes/目录下，不需要额外配置路径

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