如何使用 Angular 2 为不同环境加载不同的全局 css 样式 [英] How to load different global css styles for different environments with Angular 2

问题描述

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

I would like to load different global css styles for different environments. In angular-cli.json it is "hardcoded" to "styles.css". Is there a way to load different css file - based on some property defined in environment?

推荐答案

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

Based on user1964629's answer I came up with the following solution

我有一个白标网络应用，我想根据它适用于哪个客户端应用不同的主题.

I have a white label web-app that I wanted to apply a different themes to based on which client it was for.

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

First I made two different apps in the angular-cli-json file. I basically duplicated the one that was there and added an name property to each one:

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

---

客户端特定的 SCSS

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

---

Client specific SCSS

In the app directory I created a folder named scss and added some files and subdirectories like so:

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

As you can see there is a client specific folder for each client containing a _theme.scss file. This file has client specific scss variables.There are also some general .scss files in the root of the scss directory.

然后我将其添加到 angular-cli.json 中的 client 1 应用:

I then added this to the client 1 app in angular-cli.json:

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

这对客户 2:

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

添加 includePaths 意味着我可以导入 scss 文件而无需指定文件的完整路径，同时只加载与客户端相关的主题文件.我改变了我的 styles.scss 看起来像这样:

Adding the includePaths meant I could import scss files without specifiying the full path to the file, and at the same time only load the theme file relevant to the client. I changed my styles.scss to look like this:

@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 文件中以访问特定于主题的变量.

It also meant I could @import 'theme' into any other .scss file in my project to access theme specific variables.

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

I went a little further from here and created client specific environment files too. Like this:

我像这样为客户端 1 更新了 angular-cli.json:

I updated the angular-cli.json for client 1 like this:

  "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 文件如下所示:

Then added a 'client' property for each environment. This allowed me to make decisions in my scripts based on which client app was running. This is, for instance, what the environment.client1.prod.ts file looks like:

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

---

终于运行了一切

然后我可以像这样同时运行两个客户端应用程序:

---

Finally running everything

I could then run both client apps at the same time client like so:

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

这篇关于如何使用 Angular 2 为不同环境加载不同的全局 css 样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！