To implement this, you cannot rely on fileReplacements, but there is another method you can use.
Start by modifying your angular.json file as follows:
{
"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/"
]
}
}
}
Next, create two files in
src/assets/styles/folderForProduction/
and
src/assets/styles/folderForDevelop
. In each file, include the following CSS code:
html,
body {
font-size: 40px;
color: red;
}
For the development environment, change the color to blue instead of red.
You can now run your application using both configurations:
ng serve --configuration development
will display the text in blue.
ng serve --configuration production
will display the text in red.