diff --git a/packages/core/update/Update.ts b/packages/core/update/Update.ts
index b394963a1..1802bccdc 100644
--- a/packages/core/update/Update.ts
+++ b/packages/core/update/Update.ts
@@ -33,6 +33,7 @@ export async function updateWorkspace(rootPath: string): Promise<boolean> {
 		case "webcomponents":
 			guideLink = "https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-licensing";
 			logicFilesExtension = "ts";
+			styleExtensions = ["css", "scss", "sass"];
 			shouldUpgradeHTML = true;
 			break;
 		default:
diff --git a/spec/unit/update-spec.ts b/spec/unit/update-spec.ts
index 1f57d7b73..61568c479 100644
--- a/spec/unit/update-spec.ts
+++ b/spec/unit/update-spec.ts
@@ -1107,6 +1107,7 @@ export const GridComponent = () => {
 				([ "package.json" ], // root package.json
 				[], //index.html
 				[], // logic files
+				[], [], [], // for each style extension
 				[ "./project/package.json" ]); // inner package.json files
 			(fsSpy.readFile as jasmine.Spy).and.callFake((filePath: string) => {
 				if (filePath.indexOf("package.json") > -1) {
@@ -1127,7 +1128,7 @@ export const GridComponent = () => {
 				}
 			}));
 			expect(fsSpy.writeFile).toHaveBeenCalledTimes(2);
-			expect(fsSpy.glob).toHaveBeenCalledTimes(5);
+			expect(fsSpy.glob).toHaveBeenCalledTimes(8);
 		});
 
 		it("Should update import paths in files correctly", async () => {
@@ -1177,6 +1178,24 @@ import { ModuleManager } from '@infragistics/igniteui-webcomponents-core';
 export default class App extends LitElement {
 	const title = 'igniteui-webcomponents example';
 }`},
+{
+				path: "src/styles.css",
+				content:
+`@import "igniteui-webcomponents-grids/grids/themes/light/fluent.css";`,
+				expected:
+`@import "@infragistics/igniteui-webcomponents-grids/grids/themes/light/fluent.css";`},
+{
+				path: "src/app.scss",
+				content:
+`@use "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";`,
+				expected:
+`@use "@infragistics/igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";`},
+{
+				path: "src/app.sass",
+				content:
+`@import "igniteui-webcomponents-grids/grids/themes/dark/material.css"`,
+				expected:
+`@import "@infragistics/igniteui-webcomponents-grids/grids/themes/dark/material.css"`},
 {
 				path: ".github/workflows/node.js.yml",
 				content:
@@ -1268,6 +1287,7 @@ export default class App extends LitElement {
 				([ "package.json" ], // root package.json
 				["index.html"], // html file
 				["src/app.ts"], // logic files
+				["src/styles.css"], ["src/app.scss"], ["src/app.sass"], // for each style extension
 				[]); // inner package.json files
 			(fsSpy.readFile as jasmine.Spy).and.callFake((filePath: string) => {
 				if (filePath.indexOf("package.json") > -1) {
@@ -1284,7 +1304,7 @@ export default class App extends LitElement {
 			for (const fileEntry of mockFileArray) {
 				expect((fsSpy.writeFile as jasmine.Spy)).toHaveBeenCalledWith(fileEntry.path, fileEntry.expected);
 			}
-			expect(fsSpy.glob).toHaveBeenCalledTimes(5);
+			expect(fsSpy.glob).toHaveBeenCalledTimes(8);
 		});
 
 		it("Should update package.json files from workspaces", async () => {
@@ -1381,8 +1401,10 @@ export default class App extends LitElement {
 				([ "package.json" ], // root package.json
 				[], //index.html
 				[], // projectA logic files
+				[], [], [], // projectA for each style extension
 				[ "./projectA/package.json" ], // projectA package.json
 				[], // projectB logic files
+				[], [], [], // projectB for each style extension
 				[ "./projectB/package.json" ]); // projectB package.json
 			(fsSpy.readFile as jasmine.Spy).and.callFake((filePath: string) => {
 				if (filePath.indexOf("package.json") < 0) {
@@ -1399,7 +1421,7 @@ export default class App extends LitElement {
 			for (const fileEntry of mockFileArray) {
 				expect((fsSpy.writeFile as jasmine.Spy)).toHaveBeenCalledWith(fileEntry.path, fileEntry.expected);
 			}
-			expect(fsSpy.glob).toHaveBeenCalledTimes(7);
+			expect(fsSpy.glob).toHaveBeenCalledTimes(13);
 		});
 
 		it("Should update vite.config.ts file correctly", async () => {
@@ -1474,6 +1496,7 @@ export default defineConfig(({ mode }) => {
 				([ "package.json" ], // root package.json
 				[], // html file
 				["src/app.ts"], // logic files
+				[], [], [], // for each style extension
 				[], // inner package.json files
 				["vite.config.ts"]); // vite config files
 			(fsSpy.readFile as jasmine.Spy).and.callFake((filePath: string) => {
@@ -1491,7 +1514,7 @@ export default defineConfig(({ mode }) => {
 			for (const fileEntry of mockFileArray) {
 				expect((fsSpy.writeFile as jasmine.Spy)).toHaveBeenCalledWith(fileEntry.path, fileEntry.expected);
 			}
-			expect(fsSpy.glob).toHaveBeenCalledTimes(5);
+			expect(fsSpy.glob).toHaveBeenCalledTimes(8);
 		});
 	});
 });