Angular fileReplacements does not work with assets after upgrading

Question

After upgrading angular, fileReplacements is not working anymore with assets, here is my code :

  "fileReplacements": [
       {
         "replace": "src/assets/scss/x.scss",
         "with": "src/assets/scss/app.scss"
       },
    ]

and i tried this

"assets": [
 {
    "input": "src/assets/scss/x",
    "output": "assets/scss/",
   "glob": "app.scss"
 },
]

how to resolve this and can replace my file while building the project with specefic configuration

Answer 1

You can't do it using fileReplacements but you can achieve it in this way.

First, in your angular.json file, you can use stylePreprocessorOptions this way:

{
    "production": {
        "fileReplacements": [
            {
                "replace": "foo",
                "with": "bar"
            }
        ],
        "stylePreprocessorOptions": {
            "includePaths": [
                "src/assets/styles/folderForProduction/"
            ]
        },
        "outputHashing": "all"
    },
    "development": {
        "buildOptimizer": false,
        "optimization": false,
        "vendorChunk": true,
        "extractLicenses": false,
        "sourceMap": true,
        "namedChunks": true,
        "fileReplacements": [
            {
                "replace": "foo",
                "with": "baz"
            }
        ],
        "stylePreprocessorOptions": {
            "includePaths": [
                "src/assets/styles/folderForDevelop/"
            ]
        }
    }
}

Now, you can create two files for an example in src/assets/styles/folderForProduction/ and in src/assets/styles/folderForDevelop and put something like:

html,
body {
    font-size: 40px;
    color: red;
}

in both of them. For develop change the color to be blue instead.

now you can run your application both ways:

ng serve --configuration development and you will see the color blue.

ng serve --configuration production and you will see the color red.