From d4701fe3999317a36af0276e1f90e5f40f4fad5e Mon Sep 17 00:00:00 2001
From: sapphi-red <49056869+sapphi-red@users.noreply.github.com>
Date: Tue, 20 May 2025 18:29:11 +0900
Subject: [PATCH] fix(css): rebase url in sass relative imported modules

---
 packages/vite/src/node/plugins/css.ts  | 1 +
 playground/css/__tests__/sass-tests.ts | 5 +++++
 playground/css/index.html              | 3 +++
 playground/css/nested/relative.scss    | 4 ++++
 playground/css/sass.scss               | 1 +
 5 files changed, 14 insertions(+)
 create mode 100644 playground/css/nested/relative.scss

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 6f70b2e98cad1c..a2bfbdbd81dc54 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -2479,6 +2479,7 @@ const makeScssWorker = (
         ...(sassOptions.importers ?? []),
         internalImporter,
       ]
+      sassOptions.importer ??= internalImporter
 
       const result = await compiler.compileStringAsync(data, sassOptions)
       return {
diff --git a/playground/css/__tests__/sass-tests.ts b/playground/css/__tests__/sass-tests.ts
index 1c0dcf7b90b17f..0f9d2c36af142d 100644
--- a/playground/css/__tests__/sass-tests.ts
+++ b/playground/css/__tests__/sass-tests.ts
@@ -14,6 +14,7 @@ export const sassTest = () => {
     const imported = await page.$('.sass')
     const atImport = await page.$('.sass-at-import')
     const atImportAlias = await page.$('.sass-at-import-alias')
+    const atImportRelative = await page.$('.sass-at-import-relative')
     const urlStartsWithVariable = await page.$('.sass-url-starts-with-variable')
     const urlStartsWithVariableInterpolation1 = await page.$(
       '.sass-url-starts-with-interpolation1',
@@ -38,6 +39,10 @@ export const sassTest = () => {
     expect(await getBg(atImportAlias)).toMatch(
       isBuild ? /base64/ : '/nested/icon.png',
     )
+    expect(await getColor(atImportRelative)).toBe('olive')
+    expect(await getBg(atImportRelative)).toMatch(
+      isBuild ? /base64/ : '/nested/icon.png',
+    )
     expect(await getBg(urlStartsWithVariable)).toMatch(
       isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`,
     )
diff --git a/playground/css/index.html b/playground/css/index.html
index cc30e89693d920..d52e88ab5860a1 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -33,6 +33,9 @@ <h1>CSS</h1>
     @import from SASS _index: This should be olive and have bg image which url
     contains alias
   </p>
+  <p class="sass-at-import-relative">
+    @import from SASS relative: This should be olive and have bg image
+  </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 class="sass-url-starts-with-interpolation1">
diff --git a/playground/css/nested/relative.scss b/playground/css/nested/relative.scss
new file mode 100644
index 00000000000000..310c7f30433d3d
--- /dev/null
+++ b/playground/css/nested/relative.scss
@@ -0,0 +1,4 @@
+.sass-at-import-relative {
+  color: olive;
+  background: url(./icon.png) 10px no-repeat;
+}
diff --git a/playground/css/sass.scss b/playground/css/sass.scss
index 8d4bc5492e6299..fe1138c0214f14 100644
--- a/playground/css/sass.scss
+++ b/playground/css/sass.scss
@@ -1,5 +1,6 @@
 @use '=/nested'; // alias + custom index resolving -> /nested/_index.scss
 @use '=/nested/partial'; // sass convention: omitting leading _ for partials
+@use './nested/relative'; // relative path
 @use '@vitejs/test-css-dep'; // package w/ sass entry points
 @use '@vitejs/test-css-dep-exports'; // package with a sass export mapping
 @use '@vitejs/test-scss-proxy-dep'; // package with a sass proxy import