Can Angular CLI pass environment-specific settings to Sass variables?

Question

When building an Angular 2 app using Angular CLI/webpack, I\'d like to specify values for a few Sass variables. Like make some url(#{$my-base-path}/...) or

Answer 1

In addition to the comment by Arjan I solved the problem by creating multiple apps with different .scss file in .angular-cli.json

Step 1: Create several folders with .scss file for each environment, all the .scss files has the same filename

|- src
  ...
  |- environments
    |- environment-scss
      |- globalVars.scss
    |- environment-prod-scss
      |- globalVars.scss
  ...

in src/environment-scss/globalVars.scss:

  $my-base-path: 'YOUR/DEV/PATH'

in src/environment-prod-scss/globalVars.scss:

  $my-base-path: 'YOUR/PROD/PATH'

Step 2: Add multiple apps in .angular-cli.json ( Angular-cli Wiki Here ), and add stylePreprocessorOptions entry in each app object for each environment ( Angular-cli Wiki Here ).

"apps": [
  {
    "root": "src",
    ...
    "name": "dev",
    "stylePreprocessorOptions": {
      "includePaths": [
        "environments/environment-scss"
      ]
    }
    ...
  },
  {
    "root": "src",
    ...
    "name": "prod",
    "stylePreprocessorOptions": {
      "includePaths": [
        "environments/environment-prod-scss"
      ]
    }
    ...
  }  
],

Step 3: Import the globalVars.scss where the env-specific variables needed. Do not use the relative path

@import "globalVars";

When using ng build --app=dev, the $my-base-path will be 'YOUR/DEV/PATH', when using ng build --app=prod, the $my-base-path will be 'YOUR/PROD/PATH'

Answer 2

As of Angular CLI 6, environment.ts is no longer automatically replaced by environment.prod.ts for production builds. Instead, it uses a new option fileReplacements in angular.json.

For the future CLI 6.1, this can nicely be extended to use the very same mechanism for Sass files. Just create some environment.scss and environment.prod.scss, reference the first in some @import "../../environments/environment" in your Sass file, and adjust your angular.json file:

"defaultProject": "ponyracer",
...
"projects": {
  "ponyracer": {
    ...,
    "architect": {
      "build": {
        ...,
        "configurations": {
          "production": {
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              },
              {
                // BEWARE: this needs Angular CLI 6.1; see below
                "replace": "src/environments/environment.scss",
                "with": "src/environments/environment.prod.scss"
              }
            ],
            ...

Finally, build using build --prod, ng build --configuration=production or build ponyracer --configuration=production.

Easy and consistent.

But BEWARE, until Angular CLI 6.1 is released, the above won't work:

Currently, the file replacement functionality works only for TS files. More specifically - it works only for files that are part of the webpack compiler host.

Apparently, the bug fix will be included in CLI 6.1.

Answer 3

No, it doesn't.

Only the environment .ts files. No SASS.

Here's something else you can do:

• Use TS environment files to get some config value (save to global variable or something in main.ts - I think there used to be issues loading it in other files)
• Have two empty components with encapsulation: ViewEncapsulation.None, so that their SASS files are global
• *ngIf each of the 2 components based on the value you stored from environment file

One other way is to call ng eject to get the CLI to convert the project into a normal webpack project that you can modify its config (RC0 and above).