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

Question

我想为不同的环境加载不同的全局css样式。 在angular-cli.json中，它是＆＃34;硬编码的＆＃34; to＆＃34; styles.css＆＃34;。有没有办法加载不同的css文件 - 基于环境中定义的某些属性？

Answer 1

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

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

首先，我在 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",
       "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文件传递到app组件中来实现这一点，然后你可以加载一个特定的环境组件，其中样式数组中列出了CSS ？但我不确定这是否是“最佳做法”？

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

Answer 3

根据这个问题：https://github.com/angular/angular-cli/issues/4685 环境无法实现这一目标。但是你可以通过在angular-cli.json中使用不同的＆＃34;样式＆＃34;创建多个应用程序来实现这一点。属性。

"apps": [
{
  "name": "app1",
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
      "styles-app1.css"
  ],
  "scripts": [],
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
},
{
  "name": "app2",
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
    "styles-app2.css"
  ],
  "scripts": [],
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
}

然后使用--app选项运行，例如ng build --prod --aot --app app1

Answer 4

您可以为项目全局添加 css 文件 你只需要在angular-cli.json文件中添加样式，如下所示：

 "styles": [ 
        "listing.css",
        "styles.css"
      ],

创建listing.css文件，它将在全球范围内与styles.css

相同