diff --git a/src/platforms/web/server/modules/style.js b/src/platforms/web/server/modules/style.js
index 4c7c2bbbadc..9dcbf092c3f 100644
--- a/src/platforms/web/server/modules/style.js
+++ b/src/platforms/web/server/modules/style.js
@@ -4,11 +4,13 @@ import { escape, noUnitNumericStyleProps } from '../util'
 import { hyphenate } from 'shared/util'
 import { getStyle } from 'web/util/style'
 
+const cssVarRE = /^--/
+
 export function genStyle (style: Object): string {
   let styleText = ''
   for (const key in style) {
     const value = style[key]
-    const hyphenatedKey = hyphenate(key)
+    const hyphenatedKey = cssVarRE.test(key) ? key : hyphenate(key)
     if (Array.isArray(value)) {
       for (let i = 0, len = value.length; i < len; i++) {
         styleText += normalizeValue(hyphenatedKey, value[i])
@@ -23,7 +25,7 @@ export function genStyle (style: Object): string {
 function normalizeValue(key: string, value: any): string {
   if (
     typeof value === 'string' ||
-    (typeof value === 'number' && noUnitNumericStyleProps[key]) ||
+    (typeof value === 'number' && (noUnitNumericStyleProps[key] || cssVarRE.test(key))) ||
     value === 0
   ) {
     return `${key}:${value};`
diff --git a/test/ssr/ssr-basic-renderer.spec.js b/test/ssr/ssr-basic-renderer.spec.js
index 04c8d80e6a7..c755f81928e 100644
--- a/test/ssr/ssr-basic-renderer.spec.js
+++ b/test/ssr/ssr-basic-renderer.spec.js
@@ -67,4 +67,17 @@ describe('SSR: basicRenderer', () => {
       done()
     })
   })
+
+  // #12374
+  it('should keep CSS variables in style attributes', done => {
+    renderToString(new Vue({
+      template: `
+        <div :style="{ zIndex: 1, '--css-var1': 1, '--css_var2': 2, '--cssVar3': 3 }"></div>
+      `,
+    }), (err, html) => {
+      expect(err).toBeNull()
+      expect(html).toContain('style="z-index:1;--css-var1:1;--css_var2:2;--cssVar3:3;"')
+      done()
+    })
+  })
 })