fix(css): sass rebase url in relative imported modules

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 {

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`,
     )

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">

playground/css/nested/relative.scss

@@ -0,0 +1,4 @@
+.sass-at-import-relative {
+  color: olive;
+  background: url(./icon.png) 10px no-repeat;
+}

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