diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap
index 7762567be..1555aac09 100644
--- a/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap
+++ b/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap
@@ -119,6 +119,9 @@ exports[`angular configuration for android 1`] = `
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,
+        exclude: [
+          /\\\\.component\\\\.css$/
+        ],
         use: [
           /* config.module.rule('css').use('apply-css-loader') */
           {
@@ -144,6 +147,9 @@ exports[`angular configuration for android 1`] = `
       /* config.module.rule('scss') */
       {
         test: /\\\\.scss$/,
+        exclude: [
+          /\\\\.component\\\\.scss$/
+        ],
         use: [
           /* config.module.rule('scss').use('apply-css-loader') */
           {
@@ -196,6 +202,41 @@ exports[`angular configuration for android 1`] = `
             loader: 'raw-loader'
           }
         ]
+      },
+      /* config.module.rule('css|component') */
+      {
+        test: /\\\\.component\\\\.css$/,
+        use: [
+          /* config.module.rule('css|component').use('raw-loader') */
+          {
+            loader: 'raw-loader'
+          }
+        ]
+      },
+      /* config.module.rule('scss|component') */
+      {
+        test: /\\\\.component\\\\.scss$/,
+        use: [
+          /* config.module.rule('scss|component').use('raw-loader') */
+          {
+            loader: 'raw-loader'
+          },
+          /* config.module.rule('scss|component').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
+          },
+          /* config.module.rule('scss|component').use('sass-loader') */
+          {
+            loader: 'sass-loader'
+          }
+        ]
       }
     ]
   },
@@ -428,6 +469,9 @@ exports[`angular configuration for ios 1`] = `
       /* config.module.rule('css') */
       {
         test: /\\\\.css$/,
+        exclude: [
+          /\\\\.component\\\\.css$/
+        ],
         use: [
           /* config.module.rule('css').use('apply-css-loader') */
           {
@@ -453,6 +497,9 @@ exports[`angular configuration for ios 1`] = `
       /* config.module.rule('scss') */
       {
         test: /\\\\.scss$/,
+        exclude: [
+          /\\\\.component\\\\.scss$/
+        ],
         use: [
           /* config.module.rule('scss').use('apply-css-loader') */
           {
@@ -505,6 +552,41 @@ exports[`angular configuration for ios 1`] = `
             loader: 'raw-loader'
           }
         ]
+      },
+      /* config.module.rule('css|component') */
+      {
+        test: /\\\\.component\\\\.css$/,
+        use: [
+          /* config.module.rule('css|component').use('raw-loader') */
+          {
+            loader: 'raw-loader'
+          }
+        ]
+      },
+      /* config.module.rule('scss|component') */
+      {
+        test: /\\\\.component\\\\.scss$/,
+        use: [
+          /* config.module.rule('scss|component').use('raw-loader') */
+          {
+            loader: 'raw-loader'
+          },
+          /* config.module.rule('scss|component').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
+          },
+          /* config.module.rule('scss|component').use('sass-loader') */
+          {
+            loader: 'sass-loader'
+          }
+        ]
       }
     ]
   },
diff --git a/packages/webpack5/src/configuration/angular.ts b/packages/webpack5/src/configuration/angular.ts
index 5704e23b6..ebb434c43 100644
--- a/packages/webpack5/src/configuration/angular.ts
+++ b/packages/webpack5/src/configuration/angular.ts
@@ -42,6 +42,39 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 		.use('raw-loader')
 		.loader('raw-loader');
 
+	// exclude component css files from the normal css rule
+	config.module.rule('css').exclude.add(/\.component\.css$/);
+
+	// and instead use raw-loader, since that's what angular expects
+	config.module
+		.rule('css|component')
+		.test(/\.component\.css$/)
+		.use('raw-loader')
+		.loader('raw-loader');
+
+	// get base postCSS options
+	const postCSSOptions = config.module
+		.rule('scss')
+		.uses.get('postcss-loader')
+		.get('options');
+
+	// exclude component css files from the normal css rule
+	config.module.rule('scss').exclude.add(/\.component\.scss$/);
+
+	// and instead use raw-loader, since that's what angular expects
+	config.module
+		.rule('scss|component')
+		.test(/\.component\.scss$/)
+		.use('raw-loader')
+		.loader('raw-loader')
+		.end()
+		.use('postcss-loader')
+		.loader('postcss-loader')
+		.options(postCSSOptions)
+		.end()
+		.use('sass-loader')
+		.loader('sass-loader');
+
 	config.plugin('AngularCompilerPlugin').use(getAngularCompilerPlugin(), [
 		{
 			tsConfigPath,