diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 28a6dbb3d9ae..262191856048 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -2094,6 +2094,7 @@ export default async function getBaseWebpackConfig(
               dev,
             })
           : new FlightClientEntryPlugin({
+              appDir,
               dev,
               isEdgeServer,
             })),
diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts
index ff43c478d751..bb781e778b3b 100644
--- a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts
+++ b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts
@@ -26,6 +26,7 @@ import { traverseModules } from '../utils'
 
 interface Options {
   dev: boolean
+  appDir: string
   isEdgeServer: boolean
 }
 
@@ -41,10 +42,12 @@ const flightCSSManifest: FlightCSSManifest = {}
 
 export class FlightClientEntryPlugin {
   dev: boolean
+  appDir: string
   isEdgeServer: boolean
 
   constructor(options: Options) {
     this.dev = options.dev
+    this.appDir = options.appDir
     this.isEdgeServer = options.isEdgeServer
   }
 
@@ -247,7 +250,7 @@ export class FlightClientEntryPlugin {
           if (!chunk.name) return
           if (!chunk.name.endsWith('/page')) return
 
-          const entryName = path.join(compiler.context, chunk.name)
+          const entryName = path.join(this.appDir, '..', chunk.name)
 
           if (!cssImportsForChunk[entryName]) {
             cssImportsForChunk[entryName] = []
diff --git a/test/e2e/app-dir/app-alias.test.ts b/test/e2e/app-dir/app-alias.test.ts
index b6c0bf069798..6180195a2f46 100644
--- a/test/e2e/app-dir/app-alias.test.ts
+++ b/test/e2e/app-dir/app-alias.test.ts
@@ -1,6 +1,7 @@
 import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
 import { renderViaHTTP } from 'next-test-utils'
+import webdriver from 'next-webdriver'
 import path from 'path'
 
 describe('app-dir alias handling', () => {
@@ -27,6 +28,14 @@ describe('app-dir alias handling', () => {
 
   it('should handle typescript paths alias correctly', async () => {
     const html = await renderViaHTTP(next.url, '/button')
-    expect(html).toContain('<button>click</button>')
+    expect(html).toContain('click</button>')
+  })
+
+  it('should resolve css imports from outside with src folder presented', async () => {
+    const browser = await webdriver(next.url, '/button')
+    const fontSize = await browser
+      .elementByCss('button')
+      .getComputedCss('font-size')
+    expect(fontSize).toBe('50px')
   })
 })
diff --git a/test/e2e/app-dir/app-alias/ui/button.tsx b/test/e2e/app-dir/app-alias/ui/button.tsx
index 39aa4721d6af..4219fce04e2e 100644
--- a/test/e2e/app-dir/app-alias/ui/button.tsx
+++ b/test/e2e/app-dir/app-alias/ui/button.tsx
@@ -1,3 +1,5 @@
+import styles from './style.module.css'
+
 export default function Button(props: any) {
-  return <button {...props} />
+  return <button {...props} className={styles.button} />
 }
diff --git a/test/e2e/app-dir/app-alias/ui/style.module.css b/test/e2e/app-dir/app-alias/ui/style.module.css
new file mode 100644
index 000000000000..4a83fef4cc48
--- /dev/null
+++ b/test/e2e/app-dir/app-alias/ui/style.module.css
@@ -0,0 +1,3 @@
+.button {
+  font-size: 50px;
+}