diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index b424faace62b81..8b4f498430e099 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -508,3 +508,10 @@ test('async css order with css modules', async () => {
 test('@import scss', async () => {
   expect(await getColor('.at-import-scss')).toBe('red')
 })
+
+test.runIf(isBuild)('manual chunk path', async () => {
+  // assert that the manual-chunk css is output in the directory specified in manualChunk (#12072)
+  expect(
+    findAssetFile(/dir\/dir2\/manual-chunk-[-\w]{8}\.css$/),
+  ).not.toBeUndefined()
+})
diff --git a/playground/css/main.js b/playground/css/main.js
index 62fc9f4d2fe8ff..b0b405a96a7baf 100644
--- a/playground/css/main.js
+++ b/playground/css/main.js
@@ -4,6 +4,7 @@ import './sugarss.sss'
 import './sass.scss'
 import './less.less'
 import './stylus.styl'
+import './manual-chunk.css'
 
 import rawCss from './raw-imported.css?raw'
 text('.raw-imported-css', rawCss)
diff --git a/playground/css/manual-chunk.css b/playground/css/manual-chunk.css
new file mode 100644
index 00000000000000..dc41883115cc1d
--- /dev/null
+++ b/playground/css/manual-chunk.css
@@ -0,0 +1,3 @@
+.manual-chunk {
+  color: blue;
+}
diff --git a/playground/css/vite.config.js b/playground/css/vite.config.js
index 0cce195572a584..3d301ae03bec3e 100644
--- a/playground/css/vite.config.js
+++ b/playground/css/vite.config.js
@@ -12,6 +12,15 @@ globalThis.location = new URL('http://localhost/')
 export default defineConfig({
   build: {
     cssTarget: 'chrome61',
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('manual-chunk.css')) {
+            return 'dir/dir2/manual-chunk'
+          }
+        },
+      },
+    },
   },
   esbuild: {
     logOverride: {