From 806d24d18ee224268fa603303f610c86800e7c77 Mon Sep 17 00:00:00 2001
From: frank <frank@hebingjundeMacBook-Pro.local>
Date: Fri, 24 Jun 2022 22:03:19 +0800
Subject: [PATCH] fix(css):url() with variable or relative path in sass/scss is
 broken (fix:#7651)

---
 packages/vite/src/node/plugins/css.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index a362fc124c4150..b405bc56542848 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -1101,10 +1101,17 @@ UrlRewritePostcssPlugin.postcss = true
 
 function rewriteCssUrls(
   css: string,
-  replacer: CssUrlReplacer
+  replacer: CssUrlReplacer,
+  file?: string
 ): Promise<string> {
   return asyncReplace(css, cssUrlRE, async (match) => {
     const [matched, rawUrl] = match
+    const inLess = file?.endsWith('.less')
+    const inSass = file?.endsWith('.sass')
+    const inScss = file?.endsWith('.scss')
+    if (inLess && rawUrl.startsWith('@') || (inSass || inScss) && rawUrl.startsWith('$')) {
+      return `url('${rawUrl}')`
+    }
     return await doUrlReplace(rawUrl, matched, replacer)
   })
 }
@@ -1478,7 +1485,7 @@ async function rebaseUrls(
   }
 
   if (hasUrls) {
-    rebased = await rewriteCssUrls(rebased || content, rebaseFn)
+    rebased = await rewriteCssUrls(rebased || content, rebaseFn, file)
   }
 
   if (hasDataUris) {