diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index a2b02a2bf9cd33..9ff54241a9e724 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -404,7 +404,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         }
 
         if (isDirectCSSRequest(id)) {
-          return await getContentWithSourcemap(css)
+          return null
         }
         // server only
         if (options?.ssr) {
diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts
index 4ab0038333c2e6..9c7d6727f6fd9d 100644
--- a/packages/vite/src/node/server/middlewares/indexHtml.ts
+++ b/packages/vite/src/node/server/middlewares/indexHtml.ts
@@ -36,6 +36,7 @@ import {
   wrapId,
 } from '../../utils'
 import { checkPublicFile } from '../../plugins/asset'
+import { getCodeWithSourcemap, injectSourcesContent } from '../sourcemap'
 
 interface AssetNode {
   start: number
@@ -268,7 +269,22 @@ const devHtmlHook: IndexHtmlTransformHook = async (
       ensureWatchedFile(watcher, mod.file, config.root)
 
       const result = await server!.pluginContainer.transform(code, mod.id!)
-      s.overwrite(start, end, result?.code || '')
+      let content = ''
+      if (result) {
+        if (result.map) {
+          if (result.map.mappings && !result.map.sourcesContent) {
+            await injectSourcesContent(
+              result.map,
+              proxyModulePath,
+              config.logger,
+            )
+          }
+          content = getCodeWithSourcemap('css', result.code, result.map)
+        } else {
+          content = result.code
+        }
+      }
+      s.overwrite(start, end, content)
     }),
   )
 
diff --git a/packages/vite/src/node/server/pluginContainer.ts b/packages/vite/src/node/server/pluginContainer.ts
index ce851e8d2b24ec..a0e46cf4a2fb06 100644
--- a/packages/vite/src/node/server/pluginContainer.ts
+++ b/packages/vite/src/node/server/pluginContainer.ts
@@ -117,7 +117,7 @@ export interface PluginContainer {
       inMap?: SourceDescription['map']
       ssr?: boolean
     },
-  ): Promise<SourceDescription | null>
+  ): Promise<{ code: string; map: SourceMap | null }>
   load(
     id: string,
     options?: {
diff --git a/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts b/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts
index 696864b12ffd64..94ce57bd54b235 100644
--- a/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts
+++ b/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts
@@ -37,22 +37,7 @@ describe.runIf(isServe)('serve', () => {
       },
     )
     const css = await res.text()
-    const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
-      {
-        "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACT,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACb,CAAC;",
-        "sources": [
-          "/root/linked.css",
-        ],
-        "sourcesContent": [
-          ".linked {
-        color: red;
-      }
-      ",
-        ],
-        "version": 3,
-      }
-    `)
+    expect(css).not.toContain('sourceMappingURL')
   })
 
   test('linked css with import', async () => {