chore: correctly resolve url sass bundle in Angular CT

npm/webpack-dev-server/src/helpers/angularHandler.ts

@@ -1,10 +1,13 @@
 import * as fs from 'fs-extra'
 import { tmpdir } from 'os'
 import * as path from 'path'
-import type { Configuration } from 'webpack'
+import type { Configuration, RuleSetRule } from 'webpack'
 import type { PresetHandlerResult, WebpackDevServerConfig } from '../devServer'
 import { dynamicAbsoluteImport, dynamicImport } from '../dynamic-import'
 import { sourceDefaultWebpackDependencies } from './sourceRelativeWebpackModules'
+import debugLib from 'debug'
+
+const debug = debugLib('cypress:webpack-dev-server:angularHandler')
 
 export type BuildOptions = Record<string, any>
 
@@ -250,7 +253,33 @@ async function getAngularCliWebpackConfig (devServerConfig: AngularWebpackDevSer
   const { config } = await generateBrowserWebpackConfigFromContext(
     buildOptions,
     context,
-    (wco: any) => [getCommonConfig(wco), getStylesConfig(wco)],
+    (wco: any) => {
+      const stylesConfig = getStylesConfig(wco)
+
+      // We modify resolve-url-loader and set `root` to be `projectRoot` + `sourceRoot` to ensure
+      // imports in scss, sass, etc are correctly resolved.
+      // https://github.com/cypress-io/cypress/issues/24272
+      stylesConfig.module.rules.forEach((rule: RuleSetRule) => {
+        rule.rules?.forEach((ruleSet) => {
+          if (!Array.isArray(ruleSet.use)) {
+            return
+          }
+
+          ruleSet.use.map((loader) => {
+            if (typeof loader !== 'object' || typeof loader.options !== 'object' || !loader.loader?.includes('resolve-url-loader')) {
+              return
+            }
+
+            const root = path.join(devServerConfig.cypressConfig.projectRoot, projectConfig.sourceRoot)
+
+            debug('Adding root %s to resolve-url-loader options', root)
+            loader.options.root = path.join(devServerConfig.cypressConfig.projectRoot, projectConfig.sourceRoot)
+          })
+        })
+      })
+
+      return [getCommonConfig(wco), stylesConfig]
+    },
   )
 
   delete config.entry.main

system-tests/project-fixtures/angular/src/app/app.component.cy.ts

@@ -3,4 +3,9 @@ import { AppComponent } from './app.component'
 it('should', () => {
   cy.mount(AppComponent)
   cy.get('h1').contains('Hello World')
+  cy.get('.test-img')
+  .invoke('css', 'background-image')
+  .then((img) => {
+    expect(img).to.contain('__cypress/src/test.png')
+  })
 })

system-tests/project-fixtures/angular/src/app/app.component.html

@@ -1 +1,2 @@
-<h1>Hello World your app is running!</h1>
+<h1>Hello World your app is running!</h1>
+<div class="test-img"></div>

system-tests/project-fixtures/angular/src/app/app.component.scss

@@ -1,3 +1,10 @@
 h1 {
   color: red
+}
+
+.test-img {
+  background-image: url("/assets/test.png");
+  background-size: contain;
+  height: 100px;
+  width: 100px;
 }