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

Question

我想为不同的环境加载不同的全局CSS样式.在angular-cli.json中,它是"硬编码"到"styles.css".有没有办法加载不同的css文件 - 基于环境中定义的一些属性？

Answer 1

根据user1964629的回答，我提出了以下解决方案

我有一个白色标签的网络应用程序，我想根据其使用的客户端来应用不同的主题。

首先，我在angular-cli-json文件中制作了两个不同的应用程序。我基本上复制了那里的那个，并为每个名字添加了一个name属性：

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

客户特定的SCSS

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

如您所见，每个客户端都有一个特定于客户端的_theme.scss文件夹，其中包含一个文件。该文件具有客户端特定的scss变量。目录.scss的根scss目录中还有一些常规文件。

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

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

这给客户端2：

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

添加的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

Answer 2

我建议有一种方法可以通过将环境字符串从environment.ts文件传递到应用程序组件中来实现这一点，然后您可以加载一个特定的环境组件，该组件的样式数组中列出了CSS？但我不确定这是否是“最佳实践”？

以下链接解释了将字符串从环境文件传递到组件的过程：https ://www.google.co.uk/amp/tattoocoder.com/angular-cli-using-the-environment-option/amp/