Angular6 environment specific SCSS files

Question

I have to use a few scss files throughout my project

"src/assets/fonts.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss",

So I added these files to styles:[] inside "architect:"options":"styles":[]

And some environment-specific SCSS file

"src/environments/environment.scss"

OR

"src/environments/environment.brazil.scss"

I added "src/environments/environment.scss" again to styles array but I am replacing this file in the config object of each environment, as shown below in config brazil.

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              },
              {
                "glob": "favicon.ico",
                "input": "src",
                "output": "/"
              }
            ],
            "styles": [
              "src/assets/fonts.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss",
              "src/environments/environment.scss"
            ],
            "scripts": [
              "src/assets/js/commonScript.js"
            ]
          },
          "configurations": {
            "alphaBrazil": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.brazil.ts"
                },
                {
                  "replace": "src/environments/environment.scss",
                  "with": "src/environments/environment.brazil.scss"
                }
              ]
            }
          }
        },

But I still see "src/environments/environment.scss" is used and not "src/environments/environment.brazil.scss".

I don't understand why environment.scss is not getting replaced by environment.brazil.scss file.

The replacement uses the original name. Did you check the content or just the name? — MoxxiManagarm, Jul 22 '19 at 10:08

score -1 · Answer 1 · answered Jul 24 '19 at 11:28

-1

Under configuration part, based on the environment that we choose while we serve the application, It chooses what replacement has to beused, try this ng serve --configuration=alphaBrazil

answered Jul 24 '19 at 11:28

Shazam

115
1
9

https://github.com/angular/angular-cli/issues/10800 ==> for further ref you can refer this link – Shazam Jul 24 '19 at 11:29

Angular6 environment specific SCSS files

1 Answers1