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

[rene-anderes]

I have the same problem.
Angular 18, Cypress 13.17

cypress.config.ts:

export default defineConfig({
  component: {
    devServer: {
      framework: "angular",
      bundler: "webpack",
      options: {
        projectConfig: {
          root: "",
          sourceRoot: "src",
          buildOptions: {
            outputPath: "dist/browser",
          },
        },
      },
    },
    specPattern: "**/*.cy.ts",
  },
});

angular.json

"stylePreprocessorOptions": {
                            "includePaths": [
                                "src/styles",
                                "."
                            ]
                        }

Fehler

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.

  ╷
1 │ @use 'variables' as *;
  │ ^^^^^^^^^^^^^^^^^^^^^
  ╵

The Angular application works, only the Cypress component tests do not work. Is this a Cypress bug or a problem with the configuration?