How to replace SCSS files with Angular CLI?

Angular CLI provides the possibility to replace files when building the project. I would like to use this functionality to replace a SCSS file with default styling, with a SCSS file that contains customer specific CSS.

But Angular CLI seems not to replace the SCSS files. How could I achieve this?


What I have tried:

environment.default.ts

export const environment = {
name: 'default'
};


environment.special.ts

export const environment = {
name: 'special'
};


default/_scss-config.scss

@debug ('default'); // gets called but should never be called


special/_scss-config.scss

@debug ('special'); // never gets called


angular.json (only relevant parts)

"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"fileReplacements": [
{
"replace": "src/environments/environment.default.ts",
"with": "src/environments/environment.special.ts"
},
{
"replace": "src/scss/default/_scss-config.scss",
"with": "src/scss/special/_scss-config.scss"
}
],
"stylePreprocessorOptions": {
"includePaths": [
"src/scss/default"
]
}
}
}
}


main.ts

import { environment } from './environments/environment.default';

console.log(environment.name); // 'special' --> replacement works!


Result:
File replacement for .ts files works, but not for .scss files, as the special debug statment never gets called, but the default does, even the file should have been repalced.

Continue reading...