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

Related searches

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?

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

Dynamically import a stylesheet depending on the environment , Now i have also 2 environments called app-1 and app-2 You can set a global style to be lazy, see https://github.com/angular/angular-cli/blob/master/docs/ documentation/stories/global- Trying to load SCSS file in my TS files gives me an error while build: Add different css files conditionally #9301. Just like our everyday method of including styles from external styles which have an extension of .css, we could also import external styles in an Angular 2 component. It is as simple as importing templates with the templateUrl property in @Component decorator. @ Component ({styleUrls: ['css/style.css'], templateUrl: 'card.html',})

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/

Ability to specify different styling per environment � Issue #5803 , @angular/cli: 1.0.0 node: 6.9.1 os: win32 x64 Desired functionality. styling like in the example below (adding the environment configuration to put more context to the desired functionality): Allow specifying different styling per environment # 7317 2 2 1. @jstoppa. Copy link. Quote reply. Author� This is a reference to a file relative to the src/ directory, which is style.css by default. Leveraging this method you could: Copy the global styles into src/styles.css; Use CSS imports to import external rules into styles.css; Add more global styles via the apps[0].styles property in angular-cli.json; See also Global Styles in angular-cli's wiki.

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

Angular: tips and tricks for CSS structure | by Kevin MATHY, There are other ways to have a good CSS structure. Don't put your global styles there, or when you'll build your application, they will be� What is next step to load either of these styles at runtime? Desired functionality. I need to provide different global styles for certain customers to my website and once they login, override certain bootstrap variables (colors, logo, etc). I have defined some client specific SCSS files and marked them as lazy load in the styles array.

You can add as may css file globally you want for your project you just need to add it in styles in angular-cli.json file like this:

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

create listing.css file and it will be available globally same as styles.css

How to use environment variables to configure your Angular , deploy our AngularJS 1.x application in different environments (staging, production, etc.) In Angular 2+, the angular.json file contains build-specific instructions for Load environment variables --> <script src="env.js"></script> </ head> <body> <! -rw-r--r-- 1 jvandemo staff 0 Aug 14 09:36 styles.xxx.css. add the CSS to the index.html directly. Angular doesn't rewrite CSS that is not added to components. use "shadow piercing CSS combinator" ::ng-deep someSelector { } which also makes the CSS ignore the unique classes added to the components.

Theming Angular apps with CSS Custom Properties, The content is likely still applicable for all Angular 2 + versions. In our Angular app, we have some default global styles as well as that will be responsible for toggling between the different CSS themes. Design Systems need to handle hostile runtime environments. We were unable to load Disqus. Global CSS is easy to use: just insert some properties in styles.scss and it will always be present in each component. Before going forward, I present you my way to work: As you can see, I have a

// The file contents for the current environment will overwrite these during build. // The build system defaults to the dev environment which uses `environment.ts`, but if you do // `ng build --env=prod` then `environment.prod.ts` will be used instead. // The list of which env maps to which file can be found in `.angular-cli.json`. export const

For details, see Inspecting generated CSS below. None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

Comments
  • Thanks for your suggestion, unfortunately this doesn't help. I am familiar how to use environment variables inside my components, but in this case I would need to use environment variable in "higher level", since I want to change global styles, not component specific styles. If angular-cli.json would allow usage of environment variables, solution would be easy, but it doesn't AFAIK.
  • Yeah I get you wanted to use a 'global' style so what I was trying to say was that you could wrap each "version of application" within a global component which has these specific styles?
  • I see what you mean, maybe I could just wrap everything inside one div in app component. That was my first thought but this solution doesn't fit best since I need to style page body tag. (css provided by client) If I don't find the another way I guess I 'll have to use root component styling instead of page body styling. Thanks again.
  • Thanks for your effort, Shailesh, but this is not what I want. I want to switch between different styles depending on environment, not just use all of them at the same time.