chore: correctly resolve url sass bundle in Angular CT

[lmiller1990]

• Closes Error with assets loading from scss in Angular #24272

User facing changelog

Correctly resolve url in scss (eg background-image: url(....)).

Additional details

Angular uses webpack internally. It maps urls in sass via resolve-url-loader. We need to provide the correct root url - Angular assumes / by default, but we serve the assets on the dev server on __cypress/src.

Known edge case: url in .css files doesn't map properly. .scss and .sass do, though. We could hack it to force .css use sass-loader for css, but that's not really ideal - it's not what their app would be using in prod. In general, to work around it for now, we can just recommend using .scss - it's in Angular out of the box, and it's a superset of CSS .

This is also an issue for other frameworks (like React) using url in scss. Basically, anything using url in css and scss may exhibit this bug. The problem is more fundamental - I think we are not routing some asset requests properly for CT. I tried tweaking the routing in #25120 but it's too involved right now, and a bit more risky to touch routing, since that impacts the entire of Cypress. This routing issue (at least, I think it's routing) bleeds into other things, too, like this bug: mswjs/msw#744.

I will spend more time thinking about this in the future, but for now I'd like to get Angular working out of the box. Showing images is a pretty basic thing that should work. This PR is the most simple and low risk way to do so.

Steps to test

Grab the repro in the issue from the original user and verify the problem where the images don't show no longer is a problem.

How has the user experience changed?

url for images correctly resolves.

PR Tasks

• Have tests been added/updated?
• Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
• Has a PR for user-facing changes been opened in cypress-documentation?
• Have API changes been updated in the type definitions?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[cypress]

---

Test summary

26138 • 0 • 1377 • 0 • 26

---

Run details

Project	cypress
Status	Passed
Commit	1afe607
Started	Dec 16, 2022 4:04 PM
Ended	Dec 16, 2022 4:22 PM
Duration	18:06 💡
OS	Linux Debian -
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	migration.cy.ts		1
1	global mode > migrates 2 projects in global mode
	commands/net_stubbing.cy.ts		3
1	... > with `resourceType` > can match a proxied image request by resourceType
2	... > stops waiting when an xhr request is canceled
3	... > multibyte utf8 > 12345678901234567890123Ф
	e2e/origin/cookie_behavior.cy.ts		1
1	... > same site / cross origin > XMLHttpRequest > sets cookie on same-site request if withCredentials is true, and attaches to same-site request if withCredentials is true
This comment includes only the first 5 flaky tests. See all 26 flaky tests in the Cypress Dashboard.

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[rockindahizzy]

Nice!

[ZachJW34]

💯