diff --git a/.prettierignore b/.prettierignore
index d5283c0ed86f17..859618cf7ac1b3 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -13,3 +13,4 @@ playground/html/valid.html
 playground/external/public/slash@3.0.0.js
 playground/ssr-html/public/slash@3.0.0.js
 playground/worker/classic-worker.js
+playground/css/weapp.wxss
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 3453cadf1d2332..873bcfc360d79b 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -2380,7 +2380,20 @@ const makeModernScssWorker = (
               ? fileURLToPath(context.containingUrl)
               : options.filename
             const resolved = await internalCanonicalize(url, importer)
-            return resolved ? pathToFileURL(resolved) : null
+            if (
+              resolved &&
+              // only limit to these extensions because:
+              // - for the `@import`/`@use`s written in file loaded by `load` function,
+              //   the `canonicalize` function of that `importer` is called first
+              // - the `load` function of an importer is only called for the importer
+              //   that returned a non-null result from its `canonicalize` function
+              (resolved.endsWith('.css') ||
+                resolved.endsWith('.scss') ||
+                resolved.endsWith('.sass'))
+            ) {
+              return pathToFileURL(resolved)
+            }
+            return null
           },
           async load(canonicalUrl) {
             const ext = path.extname(canonicalUrl.pathname)
@@ -2469,7 +2482,15 @@ const makeModernCompilerScssWorker = (
             url,
             cleanScssBugUrl(importer),
           )
-          return resolved ? pathToFileURL(resolved) : null
+          if (
+            resolved &&
+            (resolved.endsWith('.css') ||
+              resolved.endsWith('.scss') ||
+              resolved.endsWith('.sass'))
+          ) {
+            return pathToFileURL(resolved)
+          }
+          return null
         },
         async load(canonicalUrl) {
           const ext = path.extname(canonicalUrl.pathname)
diff --git a/playground/css/nested/_index.scss b/playground/css/nested/_index.scss
index ff81e7d82351b9..c0767a3f4431c6 100644
--- a/playground/css/nested/_index.scss
+++ b/playground/css/nested/_index.scss
@@ -1,5 +1,6 @@
 @use 'sass:string';
 @use '/nested/root-relative'; // root relative path
+@use '../weapp.wxss'; // test user's custom importer in a file loaded by vite's custom importer
 
 @import './css-in-scss.css';
 
diff --git a/playground/css/vite.config.js b/playground/css/vite.config.js
index 754559cac6086f..115db67dcaaa53 100644
--- a/playground/css/vite.config.js
+++ b/playground/css/vite.config.js
@@ -65,7 +65,7 @@ export default defineConfig({
         importers: [
           {
             canonicalize(url) {
-              return url === 'virtual-dep'
+              return url === 'virtual-dep' || url.endsWith('.wxss')
                 ? new URL('custom-importer:virtual-dep')
                 : null
             },
diff --git a/playground/css/weapp.wxss b/playground/css/weapp.wxss
index e69de29bb2d1d6..7a6ada48018898 100644
--- a/playground/css/weapp.wxss
+++ b/playground/css/weapp.wxss
@@ -0,0 +1 @@
+this is not css