如何在Angular SCSS中使用环境变量实现多环境样式配置

方案一：构建时动态注入SCSS变量（推荐） #

这种方式将主题变量与Angular构建环境深度整合，无需单独构建CSS文件，完全复用Angular原生构建流程。

1. 统一管理环境主题变量 #

在src/assets/sass/themes目录下创建各环境专属的变量文件，仅存放主题相关SCSS变量：

// src/assets/sass/themes/_variables.dev.scss
$primary-color: #1976d2; // 开发环境主题色
$secondary-color: #dc004e;

// src/assets/sass/themes/_variables.prod.scss
$primary-color: #002b5c; // 生产环境主题色
$secondary-color: #ff6b00;

同理创建_variables.int.scss、_variables.edu.scss等对应其他环境的变量文件。

2. 修改Angular构建配置（angular.json） #

找到项目配置下的architect -> build -> configurations，为每个环境的styles数组添加对应变量文件的导入（放在公共样式前，确保变量优先加载）：

"projects": {
  "anonymous_project": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            // 其他原有配置...
            "styles": [
              "src/assets/sass/themes/_variables.prod.scss",
              "src/assets/sass/common.scss",
              "src/styles.scss"
            ]
          },
          "development": {
            // 其他原有配置...
            "styles": [
              "src/assets/sass/themes/_variables.dev.scss",
              "src/assets/sass/common.scss",
              "src/styles.scss"
            ]
          },
          "int": {
            // 其他原有配置...
            "styles": [
              "src/assets/sass/themes/_variables.int.scss",
              "src/assets/sass/common.scss",
              "src/styles.scss"
            ]
          },
          // 补充edu、aq等其他环境的配置
        }
      },
      "serve": {
        "configurations": {
          "development": {
            "browserTarget": "anonymous_project:build:development"
          }
          // 对应添加其他环境的serve配置
        }
      }
    }
  }
}

3. 简化package.json脚本 #

删除原有的build:css-*系列命令，统一使用Angular环境构建命令：

"scripts": {
  "ng": "ng",
  "start": "node --max-old-space-size=8192 ng serve --proxy-config proxy.conf.json --configuration development",
  "start:docker": "node --max-old-space-size=8192 ng serve --proxy-config proxy-docker.conf.json --configuration development",
  "build:dev": "ng build --configuration development",
  "build:prod": "ng build --configuration production",
  "build:int": "ng build --configuration int",
  "build:edu": "ng build --configuration edu",
  "build:aq": "ng build --configuration aq",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
}

执行npm run build:prod这类命令时，Angular会自动导入对应环境的主题变量，公共样式和全局样式可直接使用这些变量。

方案二：运行时通过CSS变量切换 #

如果需要在运行时动态调整主题色，或基于环境自动适配，可采用CSS变量结合Angular环境配置的方式：

1. 在环境配置中定义主题色 #

修改各环境的environment.ts文件，添加主题配置：

// src/environments/environment.ts
export const environment = {
  production: false,
  theme: {
    primaryColor: '#1976d2',
    secondaryColor: '#dc004e'
  }
};

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  theme: {
    primaryColor: '#002b5c',
    secondaryColor: '#ff6b00'
  }
};

2. 在应用启动时注入CSS变量 #

在main.ts中将环境主题色设置为根元素的CSS变量：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

// 注入主题CSS变量到根元素
document.documentElement.style.setProperty('--primary-color', environment.theme.primaryColor);
document.documentElement.style.setProperty('--secondary-color', environment.theme.secondaryColor);

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

3. 在SCSS中使用CSS变量 #

在任意SCSS文件中直接引用这些CSS变量：

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.card-header {
  background-color: var(--secondary-color);
  color: #fff;
}

这种方式无需修改构建配置，仅通过构建不同环境的Angular包即可自动应用对应主题色，适合需要灵活切换的场景。

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