fix(@angular-devkit/build-angular): only extract CSS styles when are specified in styles option

This fixes an issue were in some cases when importing CSS in the compilation using import syntax caused CSS to be extracted which causes a runtime error.

In general this is not something that we fully support since this is a specific webpack features and importing CSS as if they were ES modules not supported by the browsers. However, certain widely using libraries such as Monaco editor depend on this specific Webpack feature.

Note: This non-standard unsupported behaviour will no longer be possible in the next major version.

Closes #22358

Author: alan-agius4

packages/angular_devkit/build_angular/src/webpack/configs/styles.ts

@@ -377,17 +377,17 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
           // Setup processing rules for global and component styles
           {
             oneOf: [
-              // Component styles are all styles except defined global styles
-              {
-                use: componentStyleLoaders,
-                resourceQuery: /\?ngResource/,
-                type: 'asset/source',
-              },
               // Global styles are only defined global styles
               {
                 use: globalStyleLoaders,
+                include: globalStylePaths,
                 resourceQuery: { not: [/\?ngResource/] },
               },
+              // Component styles are all styles except defined global styles
+              {
+                use: componentStyleLoaders,
+                type: 'asset/source',
+              },
             ],
           },
           { use },