15

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 $fa-font-path point to a CDN in production, or simply set different background colors for acceptance and production builds.

I like how Angular CLI picks a config from, e.g., environments/environment.prod.ts. But I'd also happily use additional command line parameters for ng build, but no luck so far:

  • Without Angular CLI, I guess I could use Sass custom functions on the command line, but I don't know how I could use that approach along with Angular CLI.

  • Maybe I can specify the path to some specific my-variables.sccs to use for all Sass compilations?

  • Webpack's sass-loader states the following, but I've no clue if I can use that with Angular CLI:

    Environment variables

    If you want to prepend Sass code before the actual entry file, you can simply set the data option. In this case, the sass-loader will not override the data option but just append the entry's content. This is especially useful when some of your Sass variables depend on the environment:

    {
    loader: "sass-loader",
    options: {
        data: "$env: " + process.env.NODE_ENV + ";"
    }
}

Any idea?

Community
  • 1
  • 1
Arjan
  • 22,808
  • 11
  • 61
  • 71

3 Answers3

17

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'

phuud
  • 194
  • 1
  • 3
  • Nice, we tested and this works great, and allowed us to remove the dummy components introduced by the earlier answer. – Arjan Oct 11 '17 at 12:56
  • If you dont have `"root": "src"`, the paths have to start from `src` as in `src/environments/environment-scss` and `src/environments/environment-prod-scss` – Abubakar Ahmad Aug 08 '21 at 18:04
8

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.

Arjan
  • 22,808
  • 11
  • 61
  • 71
2

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).

Meligy
  • 35,654
  • 11
  • 85
  • 109
  • ...however: so this would mean that the empty components would need to include all Sass sources (or at least all sources that use the variables), which might be cumbersome if many real components have their own Sass files that use the variables. – Arjan Mar 02 '17 at 00:21
  • 1
    Just for future reference: I created 3 dummy components with `styleUrls` pointing to, e.g, `environment.prod.scss`. These set some Sass variables and then `@import` the Sass that my real component used to list in its `styleUrls` (which is now empty). As those real components use `:host deep` and scoped CSS, I could not make the styles global. Instead, I nested repeatedly: ` ` Plain ugly, but workable for now. – Arjan Mar 02 '17 at 15:36