Angular dynamically swap SASS styles depending on environment

I am using Angular 6 with the new angular.json file where I have configured a separate configuration. In this new configuration I am swapping out my constants.scss for constants.newconfig.scss.

It compiles correctly when running ng serve --configuration=newconfig but for some reason it is still using the original constants.scss.

Here is the default config for production in the angular.json

"configurations": {
  "production": {
  ...
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ]
  ...

and here is what I have added.

"configurations": {
  "production": { ...Prod stuff... },
  "newconfig": {
  ...
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.newconfig.ts"
    },
    {
      "replace": "src/constants.scss",
      "with": "src/constants.newconfig.scss"
    }
  ]
  ...

Would this have something to do with how webpack precompiles sass so by the time Angular replaces the constants file, webpack has already modified the filesystem.

Update

• My constants.scss are imported at the top of my root styles.scss
• It seems to use the correct replacement sass file if I swap a specific components sass file using the above method. So Im not sure whether webpack and the angular compiler are doing things in a different order for component specific stylesheets