Angular component testing can't find stylesheet to import

[Avcajaraville]

I am using angular 18 and cypress 13.

When running my component testing specs, I cant find a way of properly loading the sass files I need.

For context, I am using angular material, and my tree setup looks something like this:

/src
  |-> /app
  |-> /sass
    |-> /sass
            |-> /base
            |-> /mixins
            |-> ...
            |-> styles.scss
/cypress
cypress.config.ts

My cypress config is:

export default defineConfig({
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
      options: {
        projectConfig: {
          root: '',
          sourceRoot: '',
          buildOptions: {
            styles: ['./src/sass/styles.scss'],
          },
        },
      },
    },
    specPattern: '**/*.cy.ts',
  },
});

Component testing via Cypress works great, however, I am having problems loading the sass file that I need.

Basically, sass compiler is having issue when looking for the right path when using a @use rule.

I get this error:

Can't find stylesheet to import.
  ╷
1 │ @use 'mixins';
  │ ^^^^^^^^^^^^^

Which, by the way, doesn't happens when using angular, it only happens when using cypress component testing.

Any idea what might be the issue here?

Thanks!

[atomicrobokid]

Think i'm facing the same issue as you.

I have an NX project and one of the libs is purely styles. Other libs import those styles. Libs project.json is configured with:

      "stylePreprocessorOptions": {
        "includePaths": [
          "libs/styles/src/lib/sass/**"
        ]
      },

This means that I can shorten the import urls as below:
This:
@use 'main/index' as *;
Instead of
@use 'libs/styles/src/lib/sass/main/index' as *;

Which helps when the libs are bundled and published.

Everything works great, except Cypress, no matter what options i try to configure in project.json or cypress.config.ts

Disabling the cypress component tests for now