Fix outputStandalone with optimizeCss (#36028)

packages/next/build/index.ts

@@ -2085,14 +2085,15 @@ export default async function build(
         }, []),
       ]) {
         const filePath = path.join(dir, file)
-        await promises.copyFile(
-          filePath,
-          path.join(
-            distDir,
-            'standalone',
-            path.relative(outputFileTracingRoot, filePath)
-          )
+        const outputPath = path.join(
+          distDir,
+          'standalone',
+          path.relative(outputFileTracingRoot, filePath)
         )
+        await promises.mkdir(path.dirname(outputPath), {
+          recursive: true,
+        })
+        await promises.copyFile(filePath, outputPath)
       }
       await recursiveCopy(
         path.join(distDir, SERVER_DIRECTORY, 'pages'),

test/production/standalone-mode-and-optimizecss/index.test.ts

@@ -0,0 +1,43 @@
+import { createNext } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { renderViaHTTP } from 'next-test-utils'
+
+describe('standalone mode and optimizeCss', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'pages/index.js': `
+          import styles from './index.module.css'
+          
+          export default function Page() { 
+            return <p className={styles.home}>hello world</p>
+          } 
+        `,
+        'pages/index.module.css': `
+          .home {
+            background: orange;
+            color: black;
+          }
+        `,
+      },
+      nextConfig: {
+        experimental: {
+          optimizeCss: true,
+          outputStandalone: true,
+        },
+      },
+      dependencies: {
+        critters: 'latest',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should work', async () => {
+    const html = await renderViaHTTP(next.url, '/')
+    expect(html).toContain('hello world')
+    expect(html).toContain('background:orange')
+  })
+})