diff --git a/.changeset/stale-houses-yell.md b/.changeset/stale-houses-yell.md
new file mode 100644
index 000000000000..ce00895a3842
--- /dev/null
+++ b/.changeset/stale-houses-yell.md
@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+fix: ensure styles are loaded in dev mode for routes containing special characters
diff --git a/packages/kit/src/exports/vite/dev/index.js b/packages/kit/src/exports/vite/dev/index.js
index cfa237b0fb73..1f2a5b4881b5 100644
--- a/packages/kit/src/exports/vite/dev/index.js
+++ b/packages/kit/src/exports/vite/dev/index.js
@@ -186,7 +186,9 @@ export async function dev(vite, vite_config, svelte_config) {
 								) {
 									try {
 										query.set('inline', '');
-										const mod = await vite.ssrLoadModule(`${url.pathname}${url.search}${url.hash}`);
+										const mod = await vite.ssrLoadModule(
+											`${decodeURI(url.pathname)}${url.search}${url.hash}`
+										);
 										styles[dep.url] = mod.default;
 									} catch {
 										// this can happen with dynamically imported modules, I think
diff --git "a/packages/kit/test/apps/basics/src/routes/css/enc\303\266ded/+page.svelte" "b/packages/kit/test/apps/basics/src/routes/css/enc\303\266ded/+page.svelte"
new file mode 100644
index 000000000000..6c104c3daa3d
--- /dev/null
+++ "b/packages/kit/test/apps/basics/src/routes/css/enc\303\266ded/+page.svelte"
@@ -0,0 +1,7 @@
+<h1>this should be purple</h1>
+
+<style>
+	h1 {
+		color: purple;
+	}
+</style>
diff --git a/packages/kit/test/apps/basics/test/cross-platform/test.js b/packages/kit/test/apps/basics/test/cross-platform/test.js
index 11f2fb270823..170e3f5bd32a 100644
--- a/packages/kit/test/apps/basics/test/cross-platform/test.js
+++ b/packages/kit/test/apps/basics/test/cross-platform/test.js
@@ -29,6 +29,11 @@ test.describe('CSS', () => {
 			expect(await get_computed_style('.not', 'color')).toBe('rgb(0, 0, 0)');
 		});
 	});
+
+	test('loads styles on routes with encoded characters', async ({ page, get_computed_style }) => {
+		await page.goto('/css/encöded');
+		expect(await get_computed_style('h1', 'color')).toBe('rgb(128, 0, 128)');
+	});
 });
 
 test.describe('Shadowed pages', () => {