diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index ad46e5ba738f37..d107b13ed60017 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -1493,7 +1493,7 @@ const scss: SassStylePreprocessor = async (
   const internalImporter: Sass.Importer = (url, importer, done) => {
     resolvers.sass(url, importer).then((resolved) => {
       if (resolved) {
-        rebaseUrls(resolved, options.filename, options.alias)
+        rebaseUrls(resolved, options.filename, options.alias, '$')
           .then((data) => done?.(data))
           .catch((data) => done?.(data))
       } else {
@@ -1577,7 +1577,8 @@ const sass: SassStylePreprocessor = (source, root, options, aliasResolver) =>
 async function rebaseUrls(
   file: string,
   rootFile: string,
-  alias: Alias[]
+  alias: Alias[],
+  variablePrefix: string
 ): Promise<Sass.ImporterReturnType> {
   file = path.resolve(file) // ensure os-specific flashes
   // in the same dir, no need to rebase
@@ -1602,6 +1603,8 @@ async function rebaseUrls(
   let rebased
   const rebaseFn = (url: string) => {
     if (url.startsWith('/')) return url
+    // ignore url's starting with variable
+    if (url.startsWith(variablePrefix)) return url
     // match alias, no need to rewrite
     for (const { find } of alias) {
       const matches =
@@ -1734,7 +1737,12 @@ function createViteLessPlugin(
           path.join(dir, '*')
         )
         if (resolved) {
-          const result = await rebaseUrls(resolved, this.rootFile, this.alias)
+          const result = await rebaseUrls(
+            resolved,
+            this.rootFile,
+            this.alias,
+            '@'
+          )
           let contents: string
           if (result && 'contents' in result) {
             contents = result.contents
diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index 833063f61c7497..e2f41d893021c3 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -10,6 +10,7 @@ import {
   removeFile,
   serverLogs,
   untilUpdated,
+  viteTestUrl,
   withRetry
 } from '~utils'
 
@@ -78,6 +79,7 @@ test('sass', async () => {
   const imported = await page.$('.sass')
   const atImport = await page.$('.sass-at-import')
   const atImportAlias = await page.$('.sass-at-import-alias')
+  const urlStartsWithVariable = await page.$('.sass-url-starts-with-variable')
   const partialImport = await page.$('.sass-partial')
 
   expect(await getColor(imported)).toBe('orange')
@@ -87,6 +89,9 @@ test('sass', async () => {
   expect(await getBg(atImportAlias)).toMatch(
     isBuild ? /base64/ : '/nested/icon.png'
   )
+  expect(await getBg(urlStartsWithVariable)).toMatch(
+    isBuild ? /ok\.\w+\.png/ : `${viteTestUrl}/ok.png`
+  )
   expect(await getColor(partialImport)).toBe('orchid')
 
   editFile('sass.scss', (code) =>
@@ -109,6 +114,7 @@ test('less', async () => {
   const imported = await page.$('.less')
   const atImport = await page.$('.less-at-import')
   const atImportAlias = await page.$('.less-at-import-alias')
+  const urlStartsWithVariable = await page.$('.less-url-starts-with-variable')
 
   expect(await getColor(imported)).toBe('blue')
   expect(await getColor(atImport)).toBe('darkslateblue')
@@ -117,6 +123,9 @@ test('less', async () => {
   expect(await getBg(atImportAlias)).toMatch(
     isBuild ? /base64/ : '/nested/icon.png'
   )
+  expect(await getBg(urlStartsWithVariable)).toMatch(
+    isBuild ? /ok\.\w+\.png/ : `${viteTestUrl}/ok.png`
+  )
 
   editFile('less.less', (code) => code.replace('@color: blue', '@color: red'))
   await untilUpdated(() => getColor(imported), 'red')
diff --git a/playground/css/composes-path-resolving.module.css b/playground/css/composes-path-resolving.module.css
index 4fe7cdbad42136..a5a5172eb4104c 100644
--- a/playground/css/composes-path-resolving.module.css
+++ b/playground/css/composes-path-resolving.module.css
@@ -1,11 +1,11 @@
 .path-resolving-css {
-  composes: apply-color from '@/composed.module.css';
+  composes: apply-color from '=/composed.module.css';
 }
 
 .path-resolving-sass {
-  composes: apply-color from '@/composed.module.scss';
+  composes: apply-color from '=/composed.module.scss';
 }
 
 .path-resolving-less {
-  composes: apply-color from '@/composed.module.less';
+  composes: apply-color from '=/composed.module.less';
 }
diff --git a/playground/css/index.html b/playground/css/index.html
index 799cfebf7adbe3..93f77dfa2eb970 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -32,6 +32,7 @@ <h1>CSS</h1>
     contains alias
   </p>
   <p class="sass-partial">@import from SASS _partial: This should be orchid</p>
+  <p class="sass-url-starts-with-variable">url starts with variable</p>
   <p>Imported SASS string:</p>
   <pre class="imported-sass"></pre>
   <p class="sass-dep">
@@ -46,6 +47,7 @@ <h1>CSS</h1>
     @import from Less: This should be darkslateblue and have bg image which url
     contains alias
   </p>
+  <p class="less-url-starts-with-variable">url starts with variable</p>
   <p>Imported Less string:</p>
   <pre class="imported-less"></pre>
 
diff --git a/playground/css/less.less b/playground/css/less.less
index 49cbd3c3bb336e..f5f6fa52b36740 100644
--- a/playground/css/less.less
+++ b/playground/css/less.less
@@ -1,4 +1,4 @@
-@import '@/nested/nested';
+@import '=/nested/nested';
 @import './nested/css-in-less.less';
 
 // Test data-uri calls with relative images.
diff --git a/playground/css/linked.css b/playground/css/linked.css
index ff38b8bc9345ba..55b11f672fc500 100644
--- a/playground/css/linked.css
+++ b/playground/css/linked.css
@@ -1,4 +1,4 @@
-@import '@/linked-at-import.css';
+@import '=/linked-at-import.css';
 
 /* test postcss nesting */
 .wrapper {
diff --git a/playground/css/nested/_index.scss b/playground/css/nested/_index.scss
index 48d630b573ae1b..fee2eb88b168f2 100644
--- a/playground/css/nested/_index.scss
+++ b/playground/css/nested/_index.scss
@@ -7,5 +7,11 @@
 
 .sass-at-import-alias {
   color: olive;
-  background: url(@/nested/icon.png) 10px no-repeat;
+  background: url(=/nested/icon.png) 10px no-repeat;
+}
+
+$var: '/ok.png';
+.sass-url-starts-with-variable {
+  background: url($var);
+  background-position: center;
 }
diff --git a/playground/css/nested/nested.less b/playground/css/nested/nested.less
index e4ce110ab73679..25aa1944d32c14 100644
--- a/playground/css/nested/nested.less
+++ b/playground/css/nested/nested.less
@@ -5,5 +5,11 @@
 
 .less-at-import-alias {
   color: darkslateblue;
-  background: url(@/nested/icon.png) 10px no-repeat;
+  background: url(=/nested/icon.png) 10px no-repeat;
+}
+
+@var: '/ok.png';
+.less-url-starts-with-variable {
+  background: url('@{var}');
+  background-position: center;
 }
diff --git a/playground/css/nested/nested.sss b/playground/css/nested/nested.sss
index 2de4c96564a100..9dc685cb3e50c3 100644
--- a/playground/css/nested/nested.sss
+++ b/playground/css/nested/nested.sss
@@ -5,4 +5,4 @@
 
 .sugarss-at-import-alias
   color: darkslateblue
-  background: url(@/nested/icon.png) 10px no-repeat
+  background: url(=/nested/icon.png) 10px no-repeat
diff --git a/playground/css/nested/nested.styl b/playground/css/nested/nested.styl
index 72e6f7a5074685..8a371948538de0 100644
--- a/playground/css/nested/nested.styl
+++ b/playground/css/nested/nested.styl
@@ -3,4 +3,4 @@
 
 .stylus-import-alias
   color darkslateblue
-  background url('@/nested/icon.png') 10px no-repeat
+  background url('=/nested/icon.png') 10px no-repeat
diff --git a/playground/css/sass.scss b/playground/css/sass.scss
index 1db47622b016ad..721e6b9bfbca6c 100644
--- a/playground/css/sass.scss
+++ b/playground/css/sass.scss
@@ -1,9 +1,9 @@
-@import '@/nested'; // alias + custom index resolving -> /nested/_index.scss
-@import '@/nested/partial'; // sass convention: omitting leading _ for partials
+@import '=/nested'; // alias + custom index resolving -> /nested/_index.scss
+@import '=/nested/partial'; // sass convention: omitting leading _ for partials
 @import 'css-dep'; // package w/ sass entry points
 @import 'virtual-dep'; // virtual file added through importer
-@import '@/pkg-dep'; // package w/out sass field
-@import '@/weapp.wxss'; // wxss file
+@import '=/pkg-dep'; // package w/out sass field
+@import '=/weapp.wxss'; // wxss file
 
 .sass {
   /* injected via vite.config.js */
diff --git a/playground/css/sugarss.sss b/playground/css/sugarss.sss
index cd393b10519041..80cfc3861b9417 100644
--- a/playground/css/sugarss.sss
+++ b/playground/css/sugarss.sss
@@ -1,4 +1,4 @@
-@import '@/nested/nested.sss'
+@import '=/nested/nested.sss'
 
 .sugarss
   color: blue
diff --git a/playground/css/vite.config.js b/playground/css/vite.config.js
index 221c2a75187f35..40ca1a186e58da 100644
--- a/playground/css/vite.config.js
+++ b/playground/css/vite.config.js
@@ -14,7 +14,7 @@ module.exports = {
   },
   resolve: {
     alias: {
-      '@': __dirname,
+      '=': __dirname,
       spacefolder: __dirname + '/folder with space',
       '#alias': __dirname + '/aliased/foo.css',
       '#alias-module': __dirname + '/aliased/bar.module.css'