How to load different global css styles for different environments with Angular 2

Question

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?

Answer 1

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.

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",
  ...
}]

---

Client specific SCSS

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

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.

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

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

and this to client 2:

"stylePreprocessorOptions": {
    "includePaths": [
       "scss/client.client2",
       "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

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

---

Client specific environments

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

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"
  }

And for client 2 like this:

  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.client2.ts",
    "prod": "environments/environment.client2.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

Answer 2

I would suggest there could be a way to do so by passing in a string of the environment from the environment.ts file into the app component and then you could load a specific environment component which has the CSS listed in its styles array? But I'm not sure if this is 'best practice'?

Here's a link explaining the process of passing a string to a component from the environment files: https://www.google.co.uk/amp/tattoocoder.com/angular-cli-using-the-environment-option/amp/