diff --git a/packages/playground/legacy/__tests__/legacy.spec.ts b/packages/playground/legacy/__tests__/legacy.spec.ts
index 6a29965b10bd40..b8025694437502 100644
--- a/packages/playground/legacy/__tests__/legacy.spec.ts
+++ b/packages/playground/legacy/__tests__/legacy.spec.ts
@@ -1,8 +1,10 @@
 import {
+  listAssets,
   findAssetFile,
   isBuild,
   readManifest,
-  untilUpdated
+  untilUpdated,
+  getColor
 } from '../../testUtils'
 
 test('should work', async () => {
@@ -50,6 +52,10 @@ test('generates assets', async () => {
   )
 })
 
+test('correctly emits styles', async () => {
+  expect(await getColor('#app')).toBe('red')
+})
+
 if (isBuild) {
   test('should generate correct manifest', async () => {
     const manifest = readManifest()
@@ -73,4 +79,8 @@ if (isBuild) {
     expect(findAssetFile(/index\./)).not.toMatch(terserPatt)
     expect(findAssetFile(/polyfills-legacy/)).toMatch(terserPatt)
   })
+
+  test('should emit css file', async () => {
+    expect(listAssets().some((filename) => filename.endsWith('.css')))
+  })
 }
diff --git a/packages/playground/legacy/main.js b/packages/playground/legacy/main.js
index dc458c199b8754..b05acf439bdff8 100644
--- a/packages/playground/legacy/main.js
+++ b/packages/playground/legacy/main.js
@@ -1,3 +1,5 @@
+import './style.css'
+
 async function run() {
   const { fn } = await import('./async.js')
   fn()
diff --git a/packages/playground/legacy/style.css b/packages/playground/legacy/style.css
new file mode 100644
index 00000000000000..7bcb57b6187df5
--- /dev/null
+++ b/packages/playground/legacy/style.css
@@ -0,0 +1,3 @@
+#app {
+  color: red;
+}
diff --git a/packages/playground/legacy/vite.config.js b/packages/playground/legacy/vite.config.js
index da8addec974673..90d3be7f7c56a0 100644
--- a/packages/playground/legacy/vite.config.js
+++ b/packages/playground/legacy/vite.config.js
@@ -10,6 +10,7 @@ module.exports = {
   ],
 
   build: {
+    cssCodeSplit: false,
     manifest: true,
     rollupOptions: {
       output: {
diff --git a/packages/plugin-legacy/index.js b/packages/plugin-legacy/index.js
index 6454f213101b6e..b66c4714e19c09 100644
--- a/packages/plugin-legacy/index.js
+++ b/packages/plugin-legacy/index.js
@@ -286,6 +286,14 @@ function viteLegacyPlugin(options = {}) {
       // entirely.
       opts.__vite_force_terser__ = true
 
+      // @ts-ignore
+      // In the `generateBundle` hook,
+      // we'll delete the assets from the legacy bundle to avoid emitting duplicate assets.
+      // But that's still a waste of computing resource.
+      // So we add this flag to avoid emitting the asset in the first place whenever possible.
+      opts.__vite_skip_asset_emit__ = true
+
+      // @ts-ignore avoid emitting assets for legacy bundle
       const needPolyfills =
         options.polyfills !== false && !Array.isArray(options.polyfills)
 
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 8f7dbdae363fe8..280a4ed177983d 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -468,6 +468,11 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
     },
 
     async generateBundle(opts, bundle) {
+      // @ts-ignore asset emits are skipped in legacy bundle
+      if (opts.__vite_skip_asset_emit__) {
+        return
+      }
+
       // remove empty css chunks and their imports
       if (pureCssChunks.size) {
         const emptyChunkFiles = [...pureCssChunks]