Styles are not applying as expected after upgrading from Angular 8 to Angular 17 and Carbon Components 3 to 5

Question

`

`"dependencies": {
        "@angular/core": "^8.2.8",
        "@carbon/icons-angular": "^10.8.0",
        "@carbon/type": "^10.11.0",
        "carbon-components": "^10.13.0",
        "carbon-components-angular": "^3.52.3",
    },`

//I had the above package with the following style.css file config

`@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/theme-maps';
$carbon--theme: $carbon--theme--g10;
@import 'carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family';
@import 'carbon-components/scss/globals/scss/typography';
@import "carbon-components/scss/globals/scss/styles";
@import "~font-awesome/css/font-awesome.css";
@import '@carbon/type/scss/type';
@include carbon--type-reset();
@include carbon--font-face-mono();
@include carbon--font-face-sans();`

//After upgradation the following are the dependencies.

  `"dependencies": {
    "@angular/core": "^17.0.8",
    "@carbon/icons": "^11.33.0",
    "@carbon/styles": "^1.47.0",
    "@carbon/type": "^11.25.1",
    "@ibm/plex": "^6.3.0",
    "carbon-components": "^10.58.12",
    "carbon-components-angular": "^4.75.7",
  },`

// Following is the style.css file config

`@use '@carbon/styles/scss/config' with (
    $use-flexbox-grid: true,
    $flex-grid-columns: 12,
    $use-akamai-cdn: true,
    $font-display: swap
);
@use '@carbon/styles/scss/compat/themes' as compat;
@use '@carbon/styles/scss/themes';
@use '@carbon/styles/scss/theme' with (
    $fallback: compat.$g100,
    $theme: themes.$g10
);
@use '@carbon/styles';

@use '@carbon/type';
@use '@carbon/colors';
@import "carbon-components/scss/globals/scss/styles";`

But after the upgradation styles are not applying like earlier.

Tried with different configs`