diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index a6f16f76b8155a..7228c2fae781e2 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -954,6 +954,12 @@ async function compileCSS(
 
           return id
         },
+        async load(id) {
+          const code = fs.readFileSync(id, 'utf-8')
+          const result = await compileCSS(id, code, config)
+          result.deps?.forEach((dep) => deps.add(dep))
+          return result.code
+        },
         nameLayer(index) {
           return `vite--anon-layer-${getHash(id)}-${index}`
         },
diff --git a/packages/vite/src/types/shims.d.ts b/packages/vite/src/types/shims.d.ts
index 4e31945d0449ae..de2875bd239cfd 100644
--- a/packages/vite/src/types/shims.d.ts
+++ b/packages/vite/src/types/shims.d.ts
@@ -31,6 +31,7 @@ declare module 'postcss-import' {
       basedir: string,
       importOptions: any,
     ) => string | string[] | Promise<string | string[]>
+    load: (id: string) => Promise<string>
     nameLayer: (index: number, rootFilename: string) => string
   }) => Plugin
   export = plugin
diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index e0ef92c74c149b..5c85f24fe8820b 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -534,3 +534,7 @@ test('async css order with css modules', async () => {
     expect(await getColor('.modules-pink')).toMatchInlineSnapshot('"pink"')
   }, true)
 })
+
+test('@import scss', async () => {
+  expect(await getColor('.at-import-scss')).toBe('red')
+})
diff --git a/playground/css/imported.scss b/playground/css/imported.scss
new file mode 100644
index 00000000000000..eee442a32c9eb5
--- /dev/null
+++ b/playground/css/imported.scss
@@ -0,0 +1,5 @@
+$color: red;
+
+.at-import-scss {
+  color: $color;
+}
diff --git a/playground/css/index.html b/playground/css/index.html
index 748181b87f064e..2016c1b3c72ca8 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -192,5 +192,8 @@ <h1>CSS</h1>
   <pre class="aliased-content"></pre>
   <p class="aliased-module">import '#alias-module': this should be blue</p>
 </div>
-
+<style>
+  @import url(./imported.scss);
+</style>
+<div class="at-import-scss">@import scss: this should be red</div>
 <script type="module" src="./main.js"></script>