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

Posted 2023-03-13

【中文标题】如何使用 Angular 2 为不同的环境加载不同的全局 css 样式

【英文标题】：How to load different global css styles for different environments with Angular 2

【发布时间】：2017-07-15 07:36:25

【问题描述】：

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

【参考方案1】：

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

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

【讨论】：

感谢您的建议，很遗憾这没有帮助。我熟悉如何在我的组件中使用环境变量，但在这种情况下，我需要在“更高级别”中使用环境变量，因为我想更改全局样式，而不是特定于组件的样式。如果 angular-cli.json 允许使用环境变量，解决方案会很简单，但它不是 AFAIK。

是的，我知道您想使用“全局”样式，所以我想说的是您可以将每个“应用程序版本”包装在具有这些特定样式的全局组件中？跨度>

我明白你的意思，也许我可以将所有内容都包装在应用组件的一个 div 中。这是我的第一个想法，但这个解决方案并不适合，因为我需要设置页面正文标签的样式。 （客户端提供的css）如果我找不到另一种方式，我想我将不得不使用根组件样式而不是页面正文样式。再次感谢。

【参考方案2】：

您可以根据需要为您的项目全局添加 css 文件 您只需将其添加到 angular-cli.json 文件中的样式中，如下所示：

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

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

【讨论】：

感谢您的努力，Shailesh，但这不是我想要的。我想根据环境在不同样式之间切换，而不是同时使用所有样式。

【参考方案3】：

根据这个问题：https://github.com/angular/angular-cli/issues/4685 没有办法通过环境来实现这一点。但是您可以通过在 angular-cli.json 中创建具有不同“样式”属性的多个应用程序来做到这一点。

"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，例如ng build --prod --aot --app app1

【参考方案4】：

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

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

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

"apps": [
  "name": "client1",
  ...
,

  "name": "client2",
  ...
]

---

客户特定的 SCSS

在 app 目录中，我创建了一个名为 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