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

Question

我想为不同的环境加载不同的全局 css 样式。 在 angular-cli.json 中，它被“硬编码”为“styles.css”。有没有一种方法可以根据环境中定义的某些属性加载不同的 css 文件？

Answer 1

根据user1964629的回答我想到了以下解决方案

我有一个白标网络应用程序，我想根据它所针对的客户应用不同的主题。

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

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

---

客户端特定的 SCSS

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

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

然后我将其添加到 angular-cli.json 中的 client 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 文件中以访问特定于主题的变量。

---

客户特定环境

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

我像这样为 client 1 更新了 angular-cli.json:

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

对于 client 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