This module was already loaded, so it can't be configured using "with".

[Charanreddy6552]

After upgrading the Angular version from 16 to 18
Styles.scss
@use "@carbon/styles";
@use "@carbon/themes";
/* You can add global styles to this file, and also import other style files */
@import "ag-grid-community/styles/ag-grid.css";
@import "ag-grid-community/styles/ag-theme-alpine.css";

@import './app/util/carbon/carbon-overrides.scss';
@import './app/util/carbon/carbon-utils.scss';

$feature-flags: (
grid-columns-16: true
);

html,
body {
height: 100%;
width: 100%;
// padding: 5px;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
body {
margin: 0;
// font-family: Roboto, "Helvetica Neue", sans-serif;
font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

.ag-root-wrapper-body.ag-layout-normal.ag-focus-managed {
height: 100%;
}
found couple of errors similar
X [ERROR] Could not resolve "~@ibm/plex/IBM-Plex-Serif/fonts/split/woff2/IBMPlexSerif-SemiBoldItalic-Latin2.woff2" [plugin angular-css-resource]

src/styles.scss:956:11:
  956 │   src: url("../node_modules/@carbon/styles/scss/fonts||file:~@ibm...
      ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You can remove the tilde and use a relative path to reference it, which should remove this error.
Preprocessor stylesheets may not show the exact file location of the error.

after making few changes to styles.scss,
@use '@carbon/styles/scss/config' with (
$use-flexbox-grid: true,
$font-path: '@ibm/plex' // Update the font path
);
@use "@carbon/themes";
/* You can add global styles to this file, and also import other style files */
@import "ag-grid-community/styles/ag-grid.css";
@import "ag-grid-community/styles/ag-theme-alpine.css";

@import './app/util/carbon/carbon-overrides.scss';
@import './app/util/carbon/carbon-utils.scss';

$feature-flags: (
grid-columns-16: true
);

html,
body {
height: 100%;
width: 100%;
// padding: 5px;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
body {
margin: 0;
// font-family: Roboto, "Helvetica Neue", sans-serif;
font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

.ag-root-wrapper-body.ag-layout-normal.ag-focus-managed {
height: 100%;
}
still getting few errors
X [ERROR] This module was already loaded, so it can't be configured using "with".
┌──> node_modules@carbon\styles\scss\theme_theme.scss
9 │ ┌ @use '@carbon/themes/scss/config' with (
10│ │ $prefix: $prefix
11│ │ );
│ └─^ new load
╵
┌──> node_modules@carbon\themes\index.scss
8 │ @forward 'scss/config';
│ ━━━━━━━━━━━━━━━━━━━━━━ original load
╵
node_modules@carbon\styles\scss\theme_theme.scss 9:1 @forward
node_modules@carbon\styles\scss_theme.scss 8:1 @use
src\app\util\carbon\carbon-utils.scss 13:1 @import
src\styles.scss 22:9 root stylesheet [plugin angular-sass]

angular:styles/global:styles:5:8:
  5 │ @import 'src/styles.scss';

but,after removing the @use "@carbon/themes"; the theme in the application is not getting applied

[Akshat55]

Hi, this is a common issue, this is because you're going from using webpack (v16/17) to using vite (v18).

Here is how you use/import carbon styles:

@use '@carbon/styles/scss/config' with (
	// Use flexbox for grid - stick to CSS Grid or Flexbox
	// CSS Grid has become the default grid system in v11
	$use-flexbox-grid: true,
 	// Update the font path
	$font-path: '@ibm/plex'
);

// This will import ALL of the sub packages (themes, colors, types, etc.)
@use '@carbon/styles';

html {
	// Need to include theme to load the css variables
	@include styles.theme(styles.$g10);
}