diff --git a/src/client/client.ts b/src/client/client.ts
index 00bab69b94d96b..54ce3fb84a366a 100644
--- a/src/client/client.ts
+++ b/src/client/client.ts
@@ -33,7 +33,11 @@ socket.addEventListener('message', ({ data }) => {
         `[vite] ${path} style${index > 0 ? `#${index}` : ``} updated.`
       )
       break
-    case 'vue-style-remove':
+    case 'style-update':
+      updateStyle(id, `${path}?raw&t=${timestamp}`)
+      console.log(`[vite] ${path} updated.`)
+      break
+    case 'style-remove':
       const link = document.getElementById(`vite-css-${id}`)
       if (link) {
         document.head.removeChild(link)
@@ -65,9 +69,12 @@ socket.addEventListener('message', ({ data }) => {
 socket.addEventListener('close', () => {
   console.log(`[vite] server connection lost. polling for restart...`)
   setInterval(() => {
-    new WebSocket(`${socketProtocol}://${location.host}`).addEventListener('open', () => {
-      location.reload()
-    })
+    new WebSocket(`${socketProtocol}://${location.host}`).addEventListener(
+      'open',
+      () => {
+        location.reload()
+      }
+    )
   }, 1000)
 })
 
diff --git a/src/node/serverPluginCss.ts b/src/node/serverPluginCss.ts
index 7344a43944732f..9b5f186fb2a0f7 100644
--- a/src/node/serverPluginCss.ts
+++ b/src/node/serverPluginCss.ts
@@ -3,7 +3,7 @@ import { isImportRequest } from './utils'
 import { hmrClientId } from './serverPluginHmr'
 import hash_sum from 'hash-sum'
 
-export const cssPlugin: Plugin = ({ app }) => {
+export const cssPlugin: Plugin = ({ app, watcher, resolver }) => {
   app.use(async (ctx, next) => {
     await next()
     // handle .css imports
@@ -26,4 +26,18 @@ updateStyle(${id}, ${rawPath})
 `.trim()
     }
   })
+
+  // handle hmr
+  watcher.on('change', (file) => {
+    if (file.endsWith('.css')) {
+      const publicPath = resolver.fileToRequest(file)
+      const id = hash_sum(publicPath)
+      watcher.send({
+        type: 'style-update',
+        id,
+        path: publicPath,
+        timestamp: Date.now()
+      })
+    }
+  })
 }
diff --git a/src/node/serverPluginHmr.ts b/src/node/serverPluginHmr.ts
index 9bfcc32e1a9631..27bc7df31fa2b8 100644
--- a/src/node/serverPluginHmr.ts
+++ b/src/node/serverPluginHmr.ts
@@ -64,7 +64,15 @@ export const hmrClientId = '@hmr'
 export const hmrClientPublicPath = `/${hmrClientId}`
 
 interface HMRPayload {
-  type: string
+  type:
+    | 'vue-rerender'
+    | 'vue-reload'
+    | 'vue-style-update'
+    | 'js-update'
+    | 'style-update'
+    | 'style-remove'
+    | 'full-reload'
+    | 'custom'
   timestamp: number
   path?: string
   id?: string
@@ -178,7 +186,7 @@ export const hmrPlugin: Plugin = ({ root, app, server, watcher, resolver }) => {
       nextStyles.forEach((_, i) => {
         if (!prevStyles[i] || !isEqual(prevStyles[i], nextStyles[i])) {
           send({
-            type: 'vue-style-update',
+            type: 'style-update',
             path: publicPath,
             index: i,
             id: `${styleId}-${i}`,
@@ -191,7 +199,7 @@ export const hmrPlugin: Plugin = ({ root, app, server, watcher, resolver }) => {
     // stale styles always need to be removed
     prevStyles.slice(nextStyles.length).forEach((_, i) => {
       send({
-        type: 'vue-style-remove',
+        type: 'style-remove',
         path: publicPath,
         id: `${styleId}-${i + nextStyles.length}`,
         timestamp