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

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.