diff --git a/packages/compiler-sfc/src/compileTemplate.ts b/packages/compiler-sfc/src/compileTemplate.ts
index 019aa5b0d65..5b7fe268366 100644
--- a/packages/compiler-sfc/src/compileTemplate.ts
+++ b/packages/compiler-sfc/src/compileTemplate.ts
@@ -219,6 +219,7 @@ function doCompileTemplate({
     // We need to parse a fresh one. Can't just use `source` here since we need
     // the AST location info to be relative to the entire SFC.
     const newAST = (ssr ? CompilerDOM : compiler).parse(inAST.source, {
+      ...compilerOptions,
       parseMode: 'sfc',
       onError: e => errors.push(e),
     })
diff --git a/packages/compiler-sfc/src/style/preprocessors.ts b/packages/compiler-sfc/src/style/preprocessors.ts
index b09c3ec98c2..f81ed17e511 100644
--- a/packages/compiler-sfc/src/style/preprocessors.ts
+++ b/packages/compiler-sfc/src/style/preprocessors.ts
@@ -40,7 +40,7 @@ const scss: StylePreprocessor = (source, map, options, load = require) => {
         code: result.css.toString(),
         map: merge(
           map,
-          result.map.toJSON
+          !(result.map instanceof Buffer) && result.map.toJSON
             ? result.map.toJSON()
             : JSON.parse(result.map.toString()),
         ),
diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index de6c24dded0..cadd39f4baa 100644
--- a/packages/sfc-playground/src/App.vue
+++ b/packages/sfc-playground/src/App.vue
@@ -70,8 +70,8 @@ const sfcOptions: SFCOptions = {
   template: {
     isProd: useProdMode.value,
     compilerOptions: {
-      isCustomElement: (tag: string) => tag === 'mjx-container'
-    }
+      isCustomElement: (tag: string) => tag === 'mjx-container',
+    },
   },
 }
 
@@ -137,6 +137,12 @@ onMounted(() => {
     :autoResize="true"
     :sfcOptions="sfcOptions"
     :clearConsole="false"
+    :preview-options="{
+      customCode: {
+        importCode: `import { initCustomFormatter } from 'vue'`,
+        useCode: `initCustomFormatter()`,
+      },
+    }"
   />
 </template>