diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index ef673053abad27..8c5b201f6881a4 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -200,6 +200,13 @@ <h3 class="import-css">@import</h3>
   @import url('./css/import.css');
 </style>
 
+<h3 class="foo-public">
+  @import CSS from publicDir should load (this should be red)
+</h3>
+<style>
+  @import '/foo.css';
+</style>
+
 <script type="module">
   import './css/fonts.css'
   import './css/css-url.css'
diff --git a/packages/playground/assets/static/foo.css b/packages/playground/assets/static/foo.css
new file mode 100644
index 00000000000000..65fe63dba0de64
--- /dev/null
+++ b/packages/playground/assets/static/foo.css
@@ -0,0 +1,3 @@
+.foo-public {
+  color: red;
+}
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 804d7cc0c87789..cb62b785732e0d 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -686,9 +686,14 @@ async function compileCSS(
     postcssConfig && postcssConfig.plugins ? postcssConfig.plugins.slice() : []
 
   if (needInlineImport) {
+    const isHTMLProxy = htmlProxyRE.test(id)
     postcssPlugins.unshift(
       (await import('postcss-import')).default({
         async resolve(id, basedir) {
+          const publicFile = checkPublicFile(id, config)
+          if (isHTMLProxy && publicFile) {
+            return publicFile
+          }
           const resolved = await atImportResolvers.css(
             id,
             path.join(basedir, '*')