如何使用Angular 2为不同的环境加载不同的全局CSS样式

我有一个白色标签的网络应用程序,我想根据它所针对的客户端应用不同的主题.

首先,我在angular-cli-json文件中创建了两个不同的应用程序.我基本上复制了那里的那个并为每个添加了一个名称属性：

"apps": [{
  "name": "client1",...
},{
  "name": "client2",...
}]

客户特定的SCSS

在app目录中,我创建了一个名为scss的文件夹,并添加了一些文件和子目录,如下所示：

如您所见,每个客户端都有一个包含_theme.scss文件的客户端特定文件夹.此文件具有客户端特定的scss变量.scss目录的根目录中还有一些通用的.scss文件.

然后我将它添加到angular-cli.json中的客户端1应用程序：

"stylePreprocessorOptions": {
    "includePaths": [
       "scss/client.client1","scss"
    ]
  },

这对客户2：

"stylePreprocessorOptions": {
    "includePaths": [
       "scss/client.client2",

添加includePaths意味着我可以导入scss文件而不指定文件的完整路径,同时只加载与客户端相关的主题文件.我将styles.scss更改为如下所示：

@import 'theme';  // <--- this would be different based on which client app is running.
@import 'global'; // <--- this would be the same for both apps

这也意味着我可以在我的项目中将@import’theme’转换为任何其他.scss文件来访问特定于主题的变量.

客户特定环境

我从这里走得更远,也创建了客户端特定的环境文件.像这样：

我为客户端1更新了angular-cli.json,如下所示：

"environmentSource": "environments/environment.ts","environments": {
    "dev": "environments/environment.client1.ts","prod": "environments/environment.client1.prod.ts"
  }

对于客户端2这样：

"environmentSource": "environments/environment.ts","environments": {
    "dev": "environments/environment.client2.ts","prod": "environments/environment.client2.prod.ts"
  }

然后为每个环境添加“客户”属性.这使我能够根据运行的客户端应用程序在我的脚本中做出决策.例如,这就是environment.client1.prod.ts文件的样子：

export const environment = {
  production: true,client: 'client1'
};

最后运行一切

然后,我可以同时运行客户端应用程序,如下所示：

ng serve --app client1 --port 4201
ng serve --app client2 --port 4202