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

Answer 1

According to this issue: https://github.com/angular/angular-cli/issues/4685 There is no way to achieve this with environments. But You can do this by creating multiple apps in angular-cli.json with different "styles" property.

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

And then run ng with --app option e.g. ng build --prod --aot --app app1