diff --git a/src/stylePostLoader.ts b/src/stylePostLoader.ts
index 20a8645ac..853cf3295 100644
--- a/src/stylePostLoader.ts
+++ b/src/stylePostLoader.ts
@@ -2,13 +2,14 @@ import * as qs from 'querystring'
 import type { LoaderDefinitionFunction } from 'webpack'
 import { compiler } from './compiler'
 
-const { compileStyle } = compiler
+const { compileStyleAsync } = compiler
 
 // This is a post loader that handles scoped CSS transforms.
 // Injected right before css-loader by the global pitcher (../pitch.js)
 // for any <style scoped> selection requests initiated from within vue files.
 const StylePostLoader: LoaderDefinitionFunction = function (source, inMap) {
   const query = qs.parse(this.resourceQuery.slice(1))
+  const callback = this.async()
 
   // skip normal CSS files
   if (!('vue' in query) || query.type !== 'style' || !query.id) {
@@ -16,7 +17,7 @@ const StylePostLoader: LoaderDefinitionFunction = function (source, inMap) {
     return
   }
 
-  const { code, map, errors } = compileStyle({
+  compileStyleAsync({
     source: source as string,
     filename: this.resourcePath,
     id: `data-v-${query.id}`,
@@ -25,12 +26,16 @@ const StylePostLoader: LoaderDefinitionFunction = function (source, inMap) {
     trim: true,
     isProd: this.mode === 'production' || process.env.NODE_ENV === 'production',
   })
-
-  if (errors.length) {
-    this.callback(errors[0])
-  } else {
-    this.callback(null, code, map as any)
-  }
+    .then(({ code, map, errors }) => {
+      if (errors.length) {
+        callback(errors[0])
+      } else {
+        callback(null, code, map as any)
+      }
+    })
+    .catch((error) => {
+      callback(error)
+    })
 }
 
 export default StylePostLoader