diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts
index f51f37ac63fb74a..4ac68fca56c3e5d 100644
--- a/packages/next/build/webpack/config/blocks/css/index.ts
+++ b/packages/next/build/webpack/config/blocks/css/index.ts
@@ -274,6 +274,7 @@ export const css = curry(async function css(
   // CSS Modules support must be enabled on the server and client so the class
   // names are available for SSR or Prerendering.
   if (ctx.hasAppDir && !ctx.isProduction) {
+    // CSS modules
     fns.push(
       loader({
         oneOf: [
@@ -285,10 +286,6 @@ export const css = curry(async function css(
             sideEffects: false,
             // CSS Modules are activated via this specific extension.
             test: regexCssModules,
-            // Match CSS modules that are used by the app dir.
-            issuerLayer: (layer: string) =>
-              layer === WEBPACK_LAYERS.server ||
-              layer === WEBPACK_LAYERS.client,
             use: [
               require.resolve('../../../loaders/next-flight-css-dev-loader'),
               ...getCssModuleLoader(ctx, lazyPostCSSInitializer),
@@ -297,10 +294,12 @@ export const css = curry(async function css(
         ],
       })
     )
+
+    // Opt-in support for Sass (using .scss or .sass extensions).
     fns.push(
       loader({
         oneOf: [
-          // Opt-in support for Sass (using .scss or .sass extensions).
+          // For app dir, we match both server and client layers.
           markRemovable({
             // Sass Modules should never have side effects. This setting will
             // allow unused Sass to be removed from the production build.
@@ -309,10 +308,6 @@ export const css = curry(async function css(
             sideEffects: false,
             // Sass Modules are activated via this specific extension.
             test: regexSassModules,
-            // Match CSS modules that are used by the app dir.
-            issuerLayer: (layer: string) =>
-              layer === WEBPACK_LAYERS.server ||
-              layer === WEBPACK_LAYERS.client,
             use: [
               require.resolve('../../../loaders/next-flight-css-dev-loader'),
               ...getCssModuleLoader(
diff --git a/test/e2e/app-dir/rsc-external.test.ts b/test/e2e/app-dir/rsc-external.test.ts
index 74c2936e7b870ec..290bcecffd53963 100644
--- a/test/e2e/app-dir/rsc-external.test.ts
+++ b/test/e2e/app-dir/rsc-external.test.ts
@@ -145,4 +145,14 @@ describe('app dir - rsc external dependency', () => {
       )
     ).toBe('rgb(255, 0, 0)')
   })
+
+  it('should handle external css modules in pages', async () => {
+    const browser = await webdriver(next.url, '/test-pages')
+
+    expect(
+      await browser.eval(
+        `window.getComputedStyle(document.querySelector('h1')).color`
+      )
+    ).toBe('rgb(255, 0, 0)')
+  })
 })
diff --git a/test/e2e/app-dir/rsc-external/next.config.js b/test/e2e/app-dir/rsc-external/next.config.js
index 34b0a1a36b0bdf6..ac3e4ea3960b086 100644
--- a/test/e2e/app-dir/rsc-external/next.config.js
+++ b/test/e2e/app-dir/rsc-external/next.config.js
@@ -3,6 +3,6 @@ module.exports = {
   experimental: {
     appDir: true,
     serverComponentsExternalPackages: ['conditional-exports-optout'],
-    transpilePackages: ['untranspiled-module'],
+    transpilePackages: ['untranspiled-module', 'css'],
   },
 }
diff --git a/test/e2e/app-dir/rsc-external/pages/test-pages.jsx b/test/e2e/app-dir/rsc-external/pages/test-pages.jsx
new file mode 100644
index 000000000000000..0ff36e92c997611
--- /dev/null
+++ b/test/e2e/app-dir/rsc-external/pages/test-pages.jsx
@@ -0,0 +1,5 @@
+import Foo from 'css/module'
+
+export default function Page() {
+  return <Foo />
+}