moving mdb imports from styles.scss to angular.json file

Expected behavior

when i move below imports from styles.scss to angular.json, the application is getting messed up,

this is how my imports look like in styles.scss

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss'; @import '~@fortawesome/fontawesome-free/scss/solid.scss'; @import '~@fortawesome/fontawesome-free/scss/regular.scss'; @import '~@fortawesome/fontawesome-free/scss/brands.scss'; @import '~mdb-angular-ui-kit/assets/scss/mdb.scss';

this is how my style section looks like in angular.json

"styles": [ "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", "node_modules/@fortawesome/fontawesome-free/scss/regular.scss", "node_modules/@fortawesome/fontawesome-free/scss/brands.scss", "node_modules/mdb-angular-ui-kit/assets/scss/mdb.scss", "src/styles.scss" ],

Actual behavior

I want to remove 1 2 numbered steps styles (stepper-head-icon) from mdb-stepper when I am trying to apply styles in the respective component style sheet the styles are not getting applied, but when i move the very same styles to scss file it s getting applied. so i don't want to change the styles for a complete application.

Resources (screenshots, code snippets etc.)