Cypress component testing with Angular results in SassError

[atomicrobokid]

Current Behavior

I work in a large org where we are building a new design system with NX so we can publish Storybook and separate libraries from the same project. This consists of one app (storybook) - and many libs that are designed to be published independently (components, styles, utilities etc).

When i run a cypress component test in a lib, the test fails because it doesn't find the sass file (imported from a shared styles lib)

nx build, nx serve and the storybook targets etc works fine, it's just NX's implementation of Cypress in a monorepo that does not.

This occurs when a lib is completely independent (and in the libs project.json we must define a devServerTarget of the app build target, even though it's completely normal to have libs designed to be publishable as a separate entity)

Related issue #12758 that doesn't look like there was a resolution as there wasn't a reproduction posted

If i import a component from the components lib into the top level app (even though they are totally unrelated) as an experiment, the Cypress tests works

Expected Behavior

I would expect that if we have to define a devServerTarget (even if the app is unrelated) that NX is smart enough to hoist the files where they need to go (as it does with nx build as that works because of defining stylePreprocessorOptions in the project.json and the ng-package.json)

GitHub Repo

https://github.com/atomicrobokid/testmonorepo

Steps to Reproduce

Failing

1. Download repo above and install
2. Run nx component-test angular-components
3. Tests fail

Passing

1. Import the AngularComponentsComponent into the angular-app
2. Run nx component-test angular-components
3. Tests pass

Nx Report

Node           : 20.11.1
OS             : darwin-arm64
Native Target  : aarch64-macos
npm            : 10.2.4

nx (global)        : 19.5.6
nx                 : 19.5.7
@nx/js             : 19.5.7
@nx/jest           : 19.5.7
@nx/linter         : 19.5.7
@nx/eslint         : 19.5.7
@nx/workspace      : 19.5.7
@nx/angular        : 19.5.7
@nx/cypress        : 19.5.7
@nx/devkit         : 19.5.7
@nx/eslint-plugin  : 19.5.7
@nrwl/tao          : 19.5.7
@nx/web            : 19.5.7
@nx/webpack        : 19.5.7
typescript         : 5.5.4
---------------------------------------
Registered Plugins:
@nx/cypress/plugin
@nx/eslint/plugin

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

Absolutely vital to our project we get this sorted.

NX is great for building our design system, but this is a huge blocker for our test coverage. As everything else works with this setup (serve, build, storybook, release) etc, then I would expect the Cypress implementation to follow suit

[Coly010]

Closing in favour of cypress-io/cypress#29483 as issue is on cypress side.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.