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

(cherry picked from commit f1d2873)

Author: alan-agius4

Diff for: 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 },