diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 83e18aabecdb33..da3bade7a8280a 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -300,6 +300,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
       const inlined = inlineRE.test(id)
       const modules = cssModulesCache.get(config)!.get(id)
+      const isHTMLProxy = htmlProxyRE.test(id)
       const modulesCode =
         modules && dataToEsm(modules, { namedExports: true, preferConst: true })
 
@@ -311,7 +312,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           if (options?.ssr) {
             return modulesCode || `export default ${JSON.stringify(css)}`
           }
-          if (inlined) {
+          if (inlined || isHTMLProxy) {
             return `export default ${JSON.stringify(css)}`
           }
 
@@ -346,7 +347,6 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       // and then use the cache replace inline-style-flag when `generateBundle` in vite:build-html plugin
       const inlineCSS = inlineCSSRE.test(id)
       const query = parseRequest(id)
-      const isHTMLProxy = htmlProxyRE.test(id)
       if (inlineCSS && isHTMLProxy) {
         addToHTMLProxyTransformResult(
           `${cleanUrl(id)}_${Number.parseInt(query!.index)}`,
diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts
index ca2538bd9507ed..7a11b0b02ce93f 100644
--- a/packages/vite/src/node/server/middlewares/indexHtml.ts
+++ b/packages/vite/src/node/server/middlewares/indexHtml.ts
@@ -128,13 +128,17 @@ const devHtmlHook: IndexHtmlTransformHook = async (
     if (module) {
       server?.moduleGraph.invalidateModule(module)
     }
-
-    s.overwrite(
-      node.loc.start.offset,
-      node.loc.end.offset,
-      `<script type="module" src="${modulePath}"></script>`,
-      { contentOnly: true }
-    )
+    if (ext === 'js') {
+      s.overwrite(
+        node.loc.start.offset,
+        node.loc.end.offset,
+        `<script type="module" src="${modulePath}"></script>`,
+        { contentOnly: true }
+      )
+    } else if (ext === 'css') {
+      // just use the style update hmr don't render css
+      s.append(`<script type="module" src="${modulePath}"></script>`)
+    }
   }
 
   await traverseHtml(html, htmlPath, (node) => {