diff --git a/src/transform.ts b/src/transform.ts
index f984426f..371478dc 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -102,9 +102,10 @@ export async function compileFile(
   const [clientScript, bindings] = clientScriptResult
   clientCode += clientScript
 
-  // script ssr only needs to be performed if using <script setup> where
-  // the render fn is inlined.
-  if (descriptor.scriptSetup) {
+  // script ssr needs to be performed if :
+  // 1.using <script setup> where the render fn is inlined.
+  // 2.using cssVars, as it do not need to be injected during SSR.
+  if (descriptor.scriptSetup || descriptor.cssVars.length > 0) {
     const ssrScriptResult = await doCompileScript(
       store,
       descriptor,
@@ -118,7 +119,7 @@ export async function compileFile(
       ssrCode = `/* SSR compile error: ${store.state.errors[0]} */`
     }
   } else {
-    // when no <script setup> is used, the script result will be identical.
+    // the script result will be identical.
     ssrCode += clientScript
   }
 
@@ -276,6 +277,7 @@ async function doCompileTemplate(
   isTS: boolean
 ) {
   const templateResult = store.compiler.compileTemplate({
+    isProd: false,
     ...store.options?.template,
     source: descriptor.template!.content,
     filename: descriptor.filename,
@@ -284,7 +286,6 @@ async function doCompileTemplate(
     slotted: descriptor.slotted,
     ssr,
     ssrCssVars: descriptor.cssVars,
-    isProd: false,
     compilerOptions: {
       ...store.options?.template?.compilerOptions,
       bindingMetadata,